Динамически добавлять новые поля на событие клика?

Question

Вот моя FormGroup:

this.productGroup = this.fb.group({
  name: ['', Validators.compose([Validators.required, Validators.maxLength(80)])],
  desc: ['', Validators.maxLength(3000)],
  category: ['', Validators.required]
  variants: this.fb.array([
    this.fb.group({
      type: '',
      options: ''
    })
  ])
});

Мне нужно динамически добавлять type и options контрольные поля после того, как пользователь нажмет на кнопку. FormArray должен выглядеть следующим образом после ввода пользователя: [ {type: 'size', options: 'Small', 'Big'}, {type: 'color', options: 'red', 'blue, 'yellow'}, ... ].

Вот что я пытаюсь сделать:

// Add new item to FormArray
addItem(): void {
  this.variantsArray = this.productGroup.get('variants') as FormArray;
  this.variantsArray.push(this.fb.group({
    type: '',
    options: ''
  }));
}

// Template
<form [formGroup]="productGroup">
  // inputs...
  <div formArrayName="variants" *ngFor="let item of productGroup.controls['variants']; let i = index;">
      <div [formGroupName]="i">
        <div class="row">
          <mat-form-field class="col-12">
            <input formControlName="type">
          </mat-form-field>
        </div>
        <div class="row">
          <mat-form-field class="col-12">
            <input formControlName="options">
          </mat-form-field>
        </div>
      </div>
      <div class="row">
        <a href="javascript:" (click)="addItem()"> Adicionar Variante </a>
        <a href="javascript:" (click)="removeItem(i)" *ngIf="i > 0"> Remover Variante </a>
      </div>
    </div>
</form>

Как заставить это работать?

Answer 1

Для динамического добавления formElemnt в реактивную форму сначала необходимо создать элемент формы или группу форм и вставить его в исходный формат для этого поля.

EX: у меня есть customerForm, как показано ниже

this.customerForm = this.fb.group({
  firstName: ['', [Validators.required, Validators.minLength(3)]],
  lastName: ['', [Validators.required, Validators.maxLength(50)]],
  emailGroup: this.fb.group({
    email: ['', [Validators.required, Validators.email]],
    confirmEmail: ['', Validators.required],
  }, { validator: emailMatcher }),
  phone: ''
  addresses: this.fb.array([this.createAddress()])
});

При нажатии кнопки Добавить адрес в представлении я могу вызвать функцию в компоненте, которая будет выдвигать новый адрес в массив адресов в форме.

  addAddress(): void {
   this.addresses.push(this.createAddress());
  }

 createAddress(): FormGroup {
   return this.fb.group({
      street1: ['', Validators.required],
      street2: '',
      city: '',
      state: '',
      zip: ''
   });
 }

По вашему мнению, вы можете перебирать этот массив адресов и отображать адреса. Первоначально он не будет отображаться, так как значение массива будет пустым! Надеюсь, это поможет.

Answer 2

Я не знаю точно, чего вы хотите достичь, но я думаю, что у вас есть проблема.

После:

variants: this.fb.array([
    this.fb.group({
      type: '',
      options: ''
    })
  ])

не создает массив, поэтому вы не можете использовать его с * ngFor. Если вы посмотрите немного глубже, вы увидите, что

productGroup.controls [ 'варианты']

имеет свойство с элементами управления. Так что просто измените * ngFor на:

* ngFor = "let item of productGroup.controls ['варианты']. Controls; let i = index;"

и с тобой все будет в порядке.