web-dev-qa-db-ja.com

セットアップ方法Angularリアクティブフォームによるマテリアルチップコントロール

Angular Reactive Form with Angular Materials

すべてのコントロールに、必要なバリデーターを追加します。

リアクティブフォームでチップコントロールを正しく設定する方法がわかりません。

必要なバリデーターが起動するようにformControlNameをどこに設定しますか？現時点では、間違っていると思う入力フィールドに設定しています。

もちろん、コースIDをコース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>
angularangular-materialangular-reactive-forms
8
Sun

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