web-dev-qa-db-fra.com

Comment configurer Angular Material Chip Control avec des formes réactives

J'ai un Angular forme réactive avec Angular matériaux

Pour tous mes contrôles j'ajoute le validateur requis.

Je ne sais pas comment configurer correctement le contrôle des puces avec des formulaires réactifs.

Où définissez-vous le formControlName afin que le validateur requis se déclenche? Pour le moment, je l'ai réglé sur le champ de saisie, ce qui, je suppose, est faux.

Je veux juste que courseIds soit une chaîne séparée par des virgules avec les identifiants des cours.

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

Essayez de définir formControlName au niveau <mat-chip-list>.

Dans votre modèle, définissez ngFor pour boucler sur la valeur de contrôle 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>

Ensuite, dans votre composant, créez le groupe de formulaires avec les valeurs initiales de courseIds le cas échéant, sinon utilisez un tableau vide [] (Car les puces affichent un tableau et non une chaîne). Dans vos fonctions add() et remove(), ajoutez et supprimez les valeurs de la valeur de contrôle courseIds respectivement.

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