Как настроить угловой материал Chip Contol с реактивными формами

Question

У меня есть угловая реактивная форма с угловыми материалами

Для всех моих элементов управления я добавляю необходимый валидатор.

Я не уверен, как правильно настроить управление чипами с помощью реактивных форм.

Где вы устанавливаете formControlName, чтобы срабатывал требуемый валидатор? На данный момент он установлен в поле ввода, что, я думаю, неверно.

Я просто хочу, чтобы идентификаторы курсов были строкой, разделенной запятыми, с идентификаторами курсов.

TS:

form: FormGroup;

ngOnInit() {
    this.form = new FormGroup({
      name: new FormControl("", [Validators.required]),
      courseIds: new FormControl("", Validators.required)
    });
  }

HTML:

  <form [formGroup]="form" (ngSubmit)="submit()">

    <mat-form-field>
      <input matInput type="text" formControlName="name" placeholder="Name">
    </mat-form-field>

    <mat-form-field>
      <mat-chip-list #chipList>
        <mat-chip *ngFor="let cid of courseIds" (removed) = "...">
          {{cid}}
        </mat-chip>

        <input matInput formControlName="courseIds"
               [matChipInputFor]="chipList" 
               placeholder="Ids" 
               (matChipInputTokenEnd)="add($event)">
      </mat-chip-list>
   </mat-form-field>    

....

    <button type="submit">OK</button>
  </form>

Answer 1

Попробуйте установить formControlName на уровне <mat-chip-list>.

В своем шаблоне установите ngFor для циклического перебора контрольного значения courseIds

<mat-form-field>
    <mat-chip-list #chipList formControlName="courseIds">
        <mat-chip *ngFor="let cid of form.get('courseIds').value" (removed) = "...">
            {{cid}}
        </mat-chip>

        <input matInput formControlName="courseIds"
            [matChipInputFor]="chipList" 
            placeholder="Ids" 
            (matChipInputTokenEnd)="add($event)">
    </mat-chip-list>
</mat-form-field>

Затемв вашем компоненте создайте группу форм с начальными значениями для courseIds, если таковые имеются, иначе используйте пустой массив [] (поскольку чипы отображают массив, а не строку).В вашей функции add() и remove() добавьте и удалите значения из управляющего значения courseIds соответственно.

form: FormGroup;

ngOnInit() {
    this.form = new FormGroup({
        name: new FormControl("", [Validators.required]),
        courseIds: new FormControl([], Validators.required)
    });
}

add() {
    ...

    // Add new input to courseIds control value
    this.courseIds.value.push(value);

    this.courseIds.updateValueAndValidity();
}

remove() {
    ...

    // Remove element from control value array
    this.courseIds.value.splice(index, 1);    // where index = index of removed element

     this.courseIds.updateValueAndValidity();
}

// use getter method to access courseIds control value easily
get courseIds() { 
    return this.form.get('courseIds');
}