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

Question

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

J'ai une propriété booléenne que je ne veux pas avoir une valeur par défaut, mais il devrait être nécessaire .

Voilà comment je crée ma forme:

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 tout cela fonctionne RadioButton est présélectionné, mais je ne veux pas que, plutôt devrait être sélectionné en cliquant sur l'un des boutons radio. Si aucun des boutons radio n'est cliqué, je veux que le formulaire soit invalide.

Answer 1

Remplacez payedOvertime: [false, Validators.required] par payedOvertime: [null, Validators.required]. Étant donné que vous l'avez défini sur false, il correspond à la valeur du bouton radio No dans le modèle et le sélectionne par défaut (à juste titre). Le réglage à null empêchera Angular de faire correspondre la valeur avec l'une de celles déclarées dans le modèle et donc aucun de ces boutons radio ne sera sélectionné.