FormControl booléen sans valeur par défaut dans angular 2

Question

J'utilise des formes réactives dans angular 2 (4.1.2)

J'ai une propriété booléenne que je ne veux pas avoir de valeur par défaut mais elle devrait être obligatoire.

Voici comment je crée mon formulaire:

constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
        payedOvertime: [false, Validators.required],
    });
}

Et mon html:

<div class="form-group">
    <label>Payed overtime</label>
    <label>
        <input type="radio" name="payedOvertime" formControlName="payedOvertime" [value]="true" />Yes
    </label>
    <label>
        <input type="radio" name="payedOvertime" formControlName="payedOvertime" [value]="false" />No
    </label>
</div>

Le problème est que pendant que cela fonctionne, le bouton radio est présélectionné mais je ne veux pas cela, il devrait plutôt être sélectionné en cliquant sur l'un des boutons radio. Si aucun des boutons radio n'est cliqué, je veux que le formulaire ne soit pas valide.

Answer 1

Changement payedOvertime: [false, Validators.required] à payedOvertime: [null, Validators.required].

Étant donné que vous le définissez sur false, il correspond à la valeur du bouton radio No dans le modèle et il le sélectionne par défaut (à juste titre). Le définir sur null empêchera Angular de faire correspondre la valeur avec l'un de ceux déclarés dans le modèle et donc aucun de ces boutons radio ne sera sélectionné.