Проблема с динамическим добавлением элемента управления в реактивную форму в Angular

Я работаю над формами Angular Reactive. Я хочу динамически добавлять элементы управления в форму. Но когда я добавляю элемент управления, он добавляется дважды в первый раз, я не знаю почему, после этого он работает нормально. вот код:

<form [formGroup]="reviewForm" >        
    <span *ngIf="isClicked">              
        <div formArrayName="controlArray">
            <div 
              class="form-group"
              *ngFor="let control of reviewForm.get('controlArray').controls; let i = index">            
              <label>{{label}} </label>                                      
              <input 
                type="{{control.value}}"                       
                class="form-control"                                        
                [formControlName]="i" >                       
            </div>  
        </div>  
    </span>
    <button type="button" (click)="addControl()">Add</button>         
</form>

код класса компонента, addControl() вызывается при нажатии кнопки «Добавить»:

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormArray, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {  
  reviewForm: FormGroup;
  inputArray: string[] = [
    'text', 'radio', 'checkbox', 'select', 'textarea', 'button'
  ];

  selectedControl: string = '';   
  isClicked:boolean= false;
  label: string;
  isRequired:boolean = false;
  placeHolderValue: string = "";
  ngOnInit(){
    this.reviewForm = new FormGroup({   
      // 'placeHolder' : new FormControl(null),   
      'controlArray': new FormArray([
        new FormControl(null)
    ])
    });
  }

  addControl(){    
      this.isClicked = true;
      const control = new FormControl(this.selectedControl);
      (<FormArray>this.reviewForm.get('controlArray')).push(control);      
      // console.log(this.selectedControl);      
    }  

  onSubmit(){
    console.log(this.reviewForm);
  }
}

person Waleed Shahzaib    schedule 18.10.2017    source источник
comment
можешь показать остальную часть кода ts ?   -  person Mohamed Ali RACHID    schedule 18.10.2017
comment
Спасибо за ваш ответ @Med_Ali_Rachid, я добавил остальную часть кода ts.   -  person Waleed Shahzaib    schedule 18.10.2017


Ответы (1)


то, что происходит, очень нормально, потому что, когда создается ваш компонент, isClicked = false и ваш formArray уже содержат один FormControl, который не отображается в начале из-за этого условия: <span *ngIf="isClicked">

когда вы добавляете новый элемент управления в FormArray , теперь он содержит два FormControl , а isClicked становится true , и отображаются два formControl .

это причина такого поведения

Надеюсь, поможет :)

person Mohamed Ali RACHID    schedule 18.10.2017
comment
Собственно, в этом и была проблема. - person Waleed Shahzaib; 18.10.2017