2016-11-01 12 views
3

Ich habe ein Problem über Array-Wert auf FormBuilder.array setzen. Im formBuilder, das kein Array ist, kann es auf diese Weise setValue verwenden, aber in formBuilder.array kann ich es nicht tun. Ich versuche, Wert auf Formbuilder 'ListServiceFeature' und 'ListserviceFeature' zu setzen, aber es ist nicht gesetzt Wert in beide Richtungen.Wie setze ich in Formbuilder Array

ts

listServiceFeature: any = ['m1', 'm2'] 

contentFormValidate(): void { 

    this.contentForm = this.formBuilder.group({ 
      'listservicefeature': this.formBuilder.array([ 
       this.formBuilder.group({ 
       listServiceFeature: ['', [Validators.required] 
       }); 
      ]), 
    }); 

    this.contentForm.controls['listservicefeature'].setValue(this.listServiceFeature); 
} 


addServiceFeature() { 
    const control = <FormArray>this.contentForm.controls['listservicefeature']; 
    control.push(this.initServiceFeature()); 
} 

removeServiceFeature(i: number) { 
    const control = <FormArray>this.contentForm.controls['listservicefeature']; 
    control.removeAt(i); 
} 

html

<div formArrayName="listservicefeature"> 
    <div class="form-group" *ngFor="let servicefeature of contentForm.controls.listservicefeature.controls; let i=index"> 
    <label for="Service">Features {{i+1}}</label> 
    <div class="input-group" [formGroupName]="i"> 
     <input type="text" class="form-control" formControlName="listServiceFeature"> 
     <template [ngIf]="i == 0"> 
      <span class="input-group-btn"> 
      <button (click)="addServiceFeature()" class="btn btn-default" type="button"> 
      <span class="lnr lnr-plus-circle icon-orange-gable-buttom"></span> 
      </button> 
      </span> 
     </template> 
     <template [ngIf]="i > 0"> 
      <span class="input-group-btn"> 
      <button (click)="removeServiceFeature(i)" class="btn btn-default" type="button"> 
      <span class="lnr lnr-trash icon-orange-gable-buttom"></span> 
      </button> 
      </span> 
     </template> 
    </div> 
    </div> 
</div> 

Antwort

0

Es sieht für mich wie das, was Sie tun möchten, ist eine Kontrolle der formArray hinzuzufügen. Werfen Sie einen Blick in die Dokumentation für reaktive Formen

https://angular.io/guide/reactive-forms

Zitat:

Beachten Sie, dass Sie die vorherige FormArray mit dem FormGroup.setControl Verfahren ersetzen, nicht mit setValue. Sie ersetzen ein Steuerelement, nicht den Wert eines Steuerelements.

in der Dokumentation sie wie folgt tun: 1) Fügen Sie einen Getter als Verknüpfung zum formArray:

get listservicefeatures(): FormArray { 
    return this.contentform.get('listservicefeature') as FormArray; 
    }; 

2) ein Add-Methode erstellen, die wie folgt aussehen:

addServiceFeature() { 
this.listservicefeatures.push(this.fb.group({newservicefeature: 'defaultvalue', [Validators.required]})); 
} 

Auch Ihre ursprüngliche Erklärung der FormArray sollte wahrscheinlich so aussehen:

this.contentForm = this.formBuilder.group({ 
      'listservicefeature': this.formBuilder.array([]), 
    }); 

Ich hoffe, das hilft :)

Verwandte Themen