Angulaire 5 forme réactive set de tapis de case à cocher

Je suis en train d'utiliser tapis-case avec des formes réactives sur Angulaire 5.1.2 et de la quantité de Matériel 5.0.2.

Tout fonctionne bien sauf que lorsque j'utilise patchValue({amateur: [false]), il est encore vérifié. Ce qui est bizarre c'est que j'ai d'autres formes, où je fais la même chose et qu'ils fonctionnent très bien. Ce n'est pas seulement l'amateur de case à cocher, il est de toutes les cases sont cochées. Juste en utilisant des "amateurs" comme un exemple.

La formControl amateur.la valeur est toujours faux. Cependant, une fois le correctif de valeur est exécutée, la commande est cochée.

Ce qui me manque?

HTML5

 <form [formGroup]="showClassGrp">
   <mat-checkbox id="amateur" class="amateur" color="primary" 
      formControlName="amateur">Amateur</mat-checkbox>
 </form>

Tapuscrit

FormBuilder œuvres et l'affichage est correct.

this.showClassGrp = this.fb.group({

  ...
  amateur: [false],
  ...
});

patch showClassGrp et toutes les cases sont cochées même tu le formControl valeur pour eux sont des faux. 

    this.showClassGrp.patchValue({
      className: [this.showClass.className],  //this works
      amateur: [false],  //this changed the display to checked.
      ...
});
  • Essayez patchValue({amateur: false}) (valeur unique à la place de tableau)
  • Tu as tellement raison! Je savais que c'était quelque chose de stupide, mais je ne pouvais pas le voir. Dès que j'ai lu de vous répondre, je savais où je suis allé mal. Merci
InformationsquelleAutor Darryl Wagoner | 2017-12-28
  1. 15

    Si vous êtes en utilisant les réactifs de départ, vous pouvez attribuer un FormControl à chaque membre de la forme. Quelque chose comme ceci

    composant.ts

      showClassGrp: FormGroup;

  constructor() { }

  ngOnInit() {


    this.showClassGrp = new FormGroup({
      'amateur': new FormControl(false),
    });

  }

  onSubmit(){
    console.log(this.showClassGrp.value.amateur);
    this.showClassGrp.patchValue({amateur: false});
    console.log(this.showClassGrp.value.amateur);
  }

    component.html

    <form [formGroup]="showClassGrp" (ngSubmit)="onSubmit()">
  <mat-checkbox id="amateur" class="amateur" color="primary"
                formControlName="amateur">Amateur</mat-checkbox>
  <button class="btn btn-primary" type="submit"> Submit </button>
</form>
    • Vous sont également correctes. Idiot m'a juste coupé et collé le formbuilder code avec les tableaux, au lieu de les valeurs. Je vous remercie.
    InformationsquelleAutor Iancovici