web-dev-qa-db-fra.com

Validation de bouton radio angulaire 2 avec ngModel

La documentation de Angular 2 indique la validation du formulaire. Mais uniquement pour les champs de saisie, tapez text. Ma question concerne Radio Buttons.

Voici HTML:

<input type="radio" required name='gender' value='Male' [(ngModel)]='gender'>Male
<input type="radio" required name='gender' value='Female' [(ngModel)]='gender'>Female
<button type='button' [disabled]="??">Next<button>

Comment définir la propriété disabled sur true si l'utilisateur n'a sélectionné aucune valeur.

validationangularangular2-forms
10
Malik Shahzad

Avec les formulaires basés sur des modèles, vous pouvez exposer votre modèle à une variable locale et interroger l'objet d'erreurs.

<form #f="ngForm">
   <input type="radio" value="male" name="gender" [(ngModel)]="gender" required #genderControl="ngModel"> Male
   <input type="radio" value="female" name="gender" [(ngModel)]="gender" required> Female
   <button [disabled]="genderControl.errors">Next</button>
</form>


export class App {
  gender = null; 
}
10
Bazinga

Puisque vous n'avez pas indiqué le module de formulaire (réactif ou basé sur un modèle) que vous utilisiez, voici une version de formulaire réactif:

html

<form [formGroup]="radioTest">
  <input type="radio" name="gender" value='Male' formControlName="gender" [(ngModel)]='gender'>Male
  <input type="radio" name='gender' value='Female' formControlName="gender" [(ngModel)]='gender'>Female
  <button type="button" [disabled]="radioTest.controls['gender'].invalid">Gender Button</button>
</form>

code composant

radioTest: FormGroup;
gender;
constructor(fb: FormBuilder) {
  this.name = 'Angular2'
  this.radioTest = fb.group({
    gender: ['', Validators.required]
  });
}

Voici un Plunker: http://plnkr.co/edit/mWhYtc2nf8hSHFbLWlEx?p=preview

9
silentsod

Valider mat-radio-group en utilisant Angular2

<form [formGroup]="answerTypeFormGroup">
    <ng-template matStepLabel>first name</ng-template>
        <mat-radio-group formControlName="answerTypeCtrl" required>
        <mat-radio-button value="option_1">Option 1</mat-radio-button>
        <mat-radio-button value="option_2">Option 2</mat-radio-button>
        <mat-radio-button value="option_3">Option 3</mat-radio-button>
    </mat-radio-group>
</form>
// if answerTypeFormGroup is not valid show some error
<div *ngIf="!answerTypeFormGroup.valid" >some error</div>
0
Amir Navid

Vous ne savez pas pourquoi les autres réponses tentent d’attacher des variables aux éléments radio alors que les radios font déjà partie de la variable ngForm et qu’il est donc utile de procéder à un myForm.valid.

Voilà le mien:

<form #f="ngForm">
  <input type="radio" value="male" name="gender" [(ngModel)]="gender" required> Male
  <input type="radio" value="female" name="gender" [(ngModel)]="gender" required> Female
  <button [disabled]="f.valid">Next</button>
</form>

Juste un f.valid devrait faire.

0
Rexford