Thursday 30 August 2018

Input Material Chips -- Init Form Array

I want to init my mat chips input with input data but when i have two chips, it form only one form :

enter image description here

TS

this.ppssToDisplay = this.ppssService.getSinglePPS(this.key)
    .subscribe(res=>{
        this.ppssToDisplay = res;
        this.ppsForm.controls['requirements'].setValue(Array(this.ppssToDisplay.effetsind));

        console.log(this.ppssToDisplay.effetsind)); 
    });

initForm(): void {
    this.ppsForm = this.formBuilder.group({
       requirements: this.formBuilder.array(['']),

// I dont know why but i must init my form with an empty chips if i want receive data from service.

    });
}

get formData () { return this.ppsForm.get('requirements'); }

Log

 (2) ["Troubles de la vessie", "Troubles de l'érection"]
        0:"Troubles de la vessie"
        1:"Troubles de l'érection"
        length:2

I construct the html code with the example of angular material.io : https://material.angular.io/components/chips/overview

HTML

<mat-form-field style="width:50%" appearance="outline">
<mat-label>Description du traitement</mat-label>
<textarea matInput formControlName="description"></textarea>
</mat-form-field>&nbsp;&nbsp;
<mat-form-field style="width:50%" appearance="outline">
<mat-label>Effets indésirables du traitement</mat-label>
<mat-chip-list #chipList>
<mat-chip *ngFor="let requirement of formData.controls; let i = index;" [selectable]="selectable"
[removable]="removable" (removed)="remove(i)">

<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
</mat-chip>
<input placeholder="Nouvel effet indésirable..."

[matChipInputFor]="chipList"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
[matChipInputAddOnBlur]="addOnBlur"
(matChipInputTokenEnd)="add($event)" />
</mat-chip-list>
<!-- <mat-autocomplete #auto2="matAutocomplete">
<mat-option *ngFor=" let option2 of filteredOptions2 | async" [value]="option2">

</mat-option>
</mat-autocomplete> -->
</mat-form-field>

Error

> core.js:1598 ERROR Error: Must supply a value for form control at index: 0.
        at forms.js:4304
        at forms.js:4274
        at Array.forEach (<anonymous>)
        at FormArray.push../node_modules/@angular/forms/fesm5/forms.js.FormArray._forEachChild (forms.js:4274)
        at FormArray.push../node_modules/@angular/forms/fesm5/forms.js.FormArray._checkAllValuesPresent (forms.js:4302)
        at FormArray.push../node_modules/@angular/forms/fesm5/forms.js.FormArray.setValu

I have the same problem if i init my form with :["Troubles de la vessie", "Troubles de l'érection",...]



from Input Material Chips -- Init Form Array

No comments:

Post a Comment