У меня есть formGroup с вложенным formArray.Я могу перебирать весь вложенный массив, но не могу отображать ввод с помощью mat-chip-list и не знаю, как получить значения ввода, добавленные в список mat-chip-list в виде массива.Вот пример стекаблица.В этом примере testNested3 показывает пустой массив.Я ожидал массив значений, введенных во входную атрибутику mat-chap ....
https://stackblitz.com/edit/angular-4d5vfj-vqsykx
@Component({
selector: 'chip-list-validation-example',
templateUrl: 'chip-list-validation-example.html',
styleUrls: ['chip-list-validation-example.css'],
})
export class ChipListValidationExample {
public myForm: FormGroup;
TestForm:FormGroup;
visible = true;
selectable = true;
removable = true;
addOnBlur = true;
readonly separatorKeysCodes: number[] = [ENTER, COMMA];
fruits: Fruit[] = [
];
// data
data = {
names: ['name1', 'name2']
}
constructor(private _fb: FormBuilder) {
this.TestForm= new FormGroup({
'testName':new FormControl(null,Validators.required),
'testNested1': new FormArray([
this.subCategory(),
])
});
}
subCategory() {
return this._fb.group({
'nestName':new FormControl(null,Validators.required),
'testNested2': new FormArray([
this.anotheList(),
])
});
;
}
anotheList() {
return this._fb.group({
'nestedExample':new FormControl(null,Validators.required),
'testNested3': new FormArray([],Validators.required),
});
}
save2(myform:any){
console.log("Checking Value",this.TestForm.value);
}
<form [formGroup]="TestForm" #addMenuForm
>
<mat-form-field>
<input matInput placeholder="Nested Name1" formControlName="testName">
</mat-form-field>
<div formArrayName="testNested1" >
<div *ngFor="let address of TestForm.controls.testNested1.controls; let i=index">
<div [formGroupName]="i">
<mat-form-field >
<input matInput placeholder="Nested Name2" formControlName="nestName">
</mat-form-field>
<div formArrayName="testNested2" >
<div *ngFor="let item of address.controls.testNested2.controls; let j=index">
<div [formGroupName]="j">
<mat-form-field>
<input matInput placeholder="Nested Name3" formControlName="nestedExample">
</mat-form-field>
<div formArrayName="testNested3" >
<mat-form-field class="example-chip-list">
<mat-chip-list #chipList aria-label="Fruit selection">
<div *ngFor="let star of item.get('testNested3').controls; let p=index">
<mat-chip *ngFor="let fruit of fruits" [selectable]="selectable"
[removable]="removable" (removed)="remove(fruit)" [formControlName]="p"
>
{{fruit.name}}
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
</mat-chip>
<input placeholder="Nested chip"
[matChipInputFor]="chipList"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
[matChipInputAddOnBlur]="addOnBlur"
(matChipInputTokenEnd)="add($event)"
>
</div>
</mat-chip-list>
</mat-form-field>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<button mat-flat-button color="primary" (click)="save2(myForm)"
>
Save
</button>
</form>