Угловой материал Мат Чиплист не показывает входное значение - PullRequest
0 голосов
/ 19 сентября 2019

У меня есть 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...