angular - 如何使用 react 形式设置 Angular Material Chip Control

Question

我有一个带有 Angular Material 的 Angular react 形式

对于我的所有控件，我添加了所需的验证器。

我不确定如何使用 react 形式正确设置芯片控制。

您在哪里设置 formControlName 以便触发所需的验证器？目前我将它设置在我猜是错误的输入字段上。

我只希望 courseIds 是带有类(class) ID 的逗号分隔字符串。

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
            [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');
}