Добавление и удаление полей ввода в массивах форм (Реактивные формы)

У меня есть локальная переменная, в которой данные бэкэнда принимаются как массив, например:

itemsFromBackend: ["Item1", "Item2"]

Создание нового массива

items: FormArray

В группе форм:

ngOnInit() {
  this.form = this.formBuilder.group({
    items: this.formBuilder.array([ this.createItem() ])
  });
}

Создание предмета

createItem(): FormGroup {
  return this.formBuilder.group({
    name: ''
  });
}

Добавление предмета:

addItem(): void {
  this.items = this.form.get('items') as FormArray;
  this.items.push(this.createItem());
}

В HTML

<div formArrayName="items" *ngFor="let item of form.get('items').controls; let i = index ">
      <div *ngFor="let item of itemsFromBackEnd" [formGroupName]="i">
        <input value={{item}} />
        <section>
            <button
              mat-raised-button
              color="primary"
              type="button"
              (click)="addItem()"
            >
              <i class="material-icons"> add </i>
            </button>
          </section>
      </div>
    </div>

Теперь я получаю два поля со значениями серверной части, но когда я нажимаю кнопку добавления, должно отображаться новое поле ввода, но при этом добавляются еще два поля ввода со значением backend. Мне нужна помощь в отображении нового поля ввода, когда я нажимаю кнопку добавления. Спасибо.


angular angular7 reactive-forms
person PremKumar    schedule 07.08.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

С этими изменениями он ведет себя так, как вы хотите

html:

<div [formGroup]="form">
  <div formArrayName="items" *ngFor="let item of getItems(); let i = index">
    <input value="{{ itemValue(item) }}" />
  </div>
  <section>
    <button mat-raised-button color="primary" type="button" (click)="addItem()">
     <i class="material-icons"> add </i>
    </button>
  </section>
</div>

ts:

itemsFromBackEnd = ['Item1', 'Item2'];
form: FormGroup;

constructor(private formBuilder: FormBuilder) {}

ngOnInit() {
  this.form = this.formBuilder.group({
    items: this.formBuilder.array([])
  });

  this.itemsFromBackEnd.forEach(i => this.addItem(i));
 }

 getItems() {
   return (<FormArray>this.form.get('items')).controls;
 }

 itemValue(item: any) {
   return item.controls.value.value;
 }

 createItem(name?: string): FormGroup {
   return this.formBuilder.group({
     value: name ? name : ''
   });
}

addItem(name?: string): void {
   const items = this.form.get('items') as FormArray;
   items.push(this.createItem(name));
}
person Bruno Cerecetto    schedule 07.08.2019