Angularの反応性フォームにコントロールを動的に追加する際の問題

Question

私はAngular Reactiveフォームで作業しています。私はフォームに動的にコントロールを追加したい。しかし、コントロールを追加すると、が2回追加されました。初めて、なぜそれがうまく動作するのかわかりません。

<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); 
    } 
} 

Answer 1

非常に通常、ウルcomponenetが作成されるため、isClicked = falseされ、ここでコードがあります<span *ngIf="isClicked">

新しい続きを追加したとき：とあなたのformArrayがすでにあるため、この状態の冒頭に示されていない1 FormControlが含まれていますFormArrayには、今度は2つのFormControlが含まれ、isClickedはtrueになり、2つのformControlが表示されます。

このこの行動の理由

はそれが役に立てば幸い:)