在Angular中動態添加控件的問題

我正在使用Angular Reactive窗體。我想動態地添加控件來形成。但是當我添加一個控件時，它第一次添加兩次我不知道爲什麼，之後它工作正常。這裏是代碼：在Angular中動態添加控件的問題

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

來源

2017-10-18 Waleed Shahzaib

你能證明你的'ts'代碼的其餘部分的原因是什麼？ –

感謝您的回覆@Med_Ali_Rachid，我添加了ts代碼的其餘部分。 –

發生的事情是非常正常，因爲創建烏爾組元時，isClicked = false並且您的formArray已包含一個FormControl，因爲此條件，開始時未顯示：<span *ngIf="isClicked">

當您添加新的Cont轉到FormArray，現在它包含兩個FormControl s和isClicked變成true，並且顯示了兩個formControl。

這個

的這種行爲

希望它能幫助:)

來源

2017-10-18 11:18:03

的確，這是問題所在。 –

在Angular中動態添加控件的問題

回答

相關問題