I want to init my mat chips input with input data but when i have two chips, it form only one form :
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>
<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