如何動態地添加文本字段我用angular2在我的項目angular2

嗨，大家好，我試圖dymanically添加輸入文本，和它的作品繼承人的代碼：如何動態地添加文本字段我用angular2在我的項目angular2

TS：

initArray() { 
    return this._fb.group({ 
      title: ['', Validators.required] 
      }) 
} 

addArray() { 
    const control = <FormArray>this.myForm.controls['myArray']; 
    //this.myGroupName.push(newName); 
    control.push(this.initArray()); 

}

HTML：

<div formArrayName="myArray"> 
    <div *ngFor="let myGroup of myForm.controls.myArray.controls; let i=index"> 
     <div [formGroupName]="i"> 
      <span *ngIf="myForm.controls.myArray.controls.length > 1" (click)="removeDataKey(i)" class="glyphicon glyphicon-remove pull-right" style="z-index:33;cursor: pointer"> 
      </span> 
      <!--[formGroupName]="myGroupName[i]"--> 
      <div [formGroupName]="myGroupName[i]"> 
       <div class="inner-addon left-addon "> 
        <i class="glyphicon marker" style="border: 5px solid #FED141"></i> 
        <input type="text" style="width:50% !important" formControlName="title" class="form-control" placeholder="Exemple : Maarif, Grand Casablanca" name="Location" Googleplace (setAddress)="getAddressOnChange($event,LocationCtrl)"> 
        <br/> 
       </div> 
      </div> 
      <!--[formGroupName]="myGroupName[i]"--> 
     </div> 
     <!--[formGroupName]="i" --> 
    </div> 
</div> 
<br/> 
<a (click)="addArray()" style="cursor: pointer">+ add text Field</a>

它給了我一個錯誤，當我添加一個新的文本字段，任何建議，請？

ERROR Error: Cannot find control with path: 'myArray -> 1 ->

來源

2017-08-25 aqw aqwx

我覺得'無forms'比'模板驅動forms'一個更好的選擇時動態添加和運行時 –

反正重要的刪除表單組件是讓你想要什麼 –

它給了我這個錯誤：無法找到與路徑控制：'myArray - > 1 - > –

不要與AngularJS
在控制器未manupulate DOM創建的輸入陣列

$scope.inputs = []; 
$scope.inputs.push({ id: 'input1', value: 'input1' }); 
$scope.inputs.push({ id: 'input2', value: 'input2' }); 
$scope.inputs.push({ id: 'input2', value: 'input2' });

<input ng-repeat="input in inputs" ng-model="input.value">

Example

來源

2017-08-25 09:21:36

感謝您的回答..但i4m使用ANgular 2 –

@aqwaqwx在角2你可以使用* ngFor。方法類似。 –

請我更新post.take一看，看看我的錯誤是什麼 –

首先

import { FormGroup,FormArray,FormBuilder,Validators } from '@angular/forms';

然後

addForm: FormGroup; // form group instance 

constructor(private formBuilder: FormBuilder) {} 
    ngOnInit() { 
     // *** this is code for adding invoice details *** 
     this.addForm = this.formBuilder.group({ 
      invoice_no: ['', Validators.required], 
      file_no: ['', Validators.required], 
      description: ['', Validators.required], 
      linktodrive: this.formBuilder.array([ 
       this.initLink(), 
      ]) 
     }); 
    } 
    initLink() { 
     return this.formBuilder.group({ 
      linkAddress: ['', Validators.required] 
     }); 
    } 
    addLink() { 
     const control = <FormArray> this.addForm.controls['linktodrive']; 
     control.push(this.initLink()); 
    } 
    removeLink(i: number) { 
     const control = <FormArray> this.addForm.controls['linktodrive']; 
     control.removeAt(i); 
    }

開頭和關閉HTML：

<div formArrayName="linktodrive"></div>

有關創建和表單的使用消除動態字段這個網站：

<div *ngFor="let address of addForm.controls.linktodrive.controls; let i=index"> 
<div> 
<span>Link {{i + 1}}</span> 
<span *ngIf="addForm.controls.linktodrive.controls.length > 1"><a (click)="removeLink(i)">REMOVE</a></span> 
</div> 

<!-- Angular assigns array index as group name by default 0, 1, 2, ... --> 
<div [formGroupName]="i"> 
<input type="text" placeholder="Enter Link" formControlName="linkAddress"> 
</div> 
</div>

最後「添加」鏈接

<div><a (click)="addLink()"></a></div>

來源

2017-08-25 09:53:42

謝謝我試過，但它給了我同樣的錯誤 –

你可以做一個蹦牀嗎？ –

如何動態地添加文本字段我用angular2在我的項目angular2

回答

相關問題