Angular 6: Как использовать FormGroup для динамического создания formControlName? - PullRequest
Новая
       51

Angular 6: Как использовать FormGroup для динамического создания formControlName?

0 голосов
/ 11 декабря 2018

Я хочу formControlName Вот так:

  • field_0
  • field_1
  • field_2

myObj = {"field_0": "значение_0 "," поле_1 ":" значение_1 "," поле_2 ":" значение_2 ",}}

Ответы [ 2 ]

0 голосов
/ 11 декабря 2018

если у вас есть что-то вроде 

fields=["field_0","field_1","field_2"]

Сначала вы должны создать FormGroup 

  createForm(fields: string[]) {
    let group: any = {};
    fields.forEach(x => {
      group[x] = new FormControl();
    })
    return new FormGroup(group);
  }

И, когда вы хотите показать это 

<form [formGroup]="form">
  <div *ngFor="let field of fields">
    <input [formControlName]="field">
  </div>
</form>
{{form?.value|json}}

Ну,мы можем заменить поля на массив объектов с метками "," field "," value ", чтобы создать форму

См. stackblitz

0 голосов
/ 11 декабря 2018

Вот пример использования formArray: 

    <div formArrayName="addresses"
         *ngFor="let address of addresses.controls; let i=index">

      <div [formGroupName]="i">
        <div class="form-group row mb-2">
          <label class="col-md-2 col-form-label"
                 attr.for="{{'street1Id' + i}}">Street Address 1</label>
          <div class="col-md-8">
            <input class="form-control"
                   id="{{'street1Id' + i}}"
                   type="text"
                   placeholder="Street address (required)"
                   formControlName="street1"
                   [ngClass]="{'is-invalid': (address.controls.street1.touched || 
                                              address.controls.street1.dirty) && 
                                              !address.controls.street1.valid }">
            <span class="invalid-feedback">
              <span *ngIf="address.controls.street1.errors?.required">
                Please enter your street address.
              </span>
            </span>
          </div>
        </div>
      </div>
    </div>

В этом примере массив форм определяется как addresses.

ngFor обрабатывает каждый адрес в массивеиспользуя i в качестве индекса.Затем я могу использовать i в поле id для определения уникального идентификатора.

Каждый элемент массива формы является группой форм.

Группа форм включает каждый элемент для адреса,(Я показываю здесь только один из этих элементов.)

Полный пример вы можете найти здесь: https://github.com/DeborahK/Angular-ReactiveForms/tree/master/Demo-Final

...