Winkel 2 Radio Schaltfläche Validierung mit ngModel

Eckige 2-Dokumentation erzählt über die Formular-Validierung. Aber nur für Eingabefelder Typ text. Meine Frage ist für die Radio-Buttons.

Hier ist 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>

How to set deaktiviert-Eigenschaft auf true, wenn der Benutzer noch nicht ausgewählten Wert.

InformationsquelleAutor Malik Shahzad | 2016-12-14
  1. 10

    Mit Vorlagen Formulare, die Sie können, setzen Sie Ihr Modell in eine lokale variable und eine Abfrage der Fehler-Objekt.

    <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; 
}
    • Könntest du ein plunker bitte? Ihre Lösung ist nicht für mich arbeiten
    InformationsquelleAutor Bazinga
  2. 9

    Da Sie nicht sagen, welche Formen Modul (Reaktiv oder Template-driven), Sie wurden mit hier ist eine reaktive Formen-version:

    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>

    Komponente code

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

    Hier ein Plunker: http://plnkr.co/edit/mWhYtc2nf8hSHFbLWlEx?p=preview

    • Aber Sie sehen, dass er mit ngModel.
    • ngModel selbst ist in Reaktive Formen sowie Vorlage Getrieben. Ein Totes Werbegeschenk für es strikt Vorlage wäre #inputVariable="ngModel" oder Kennzeichnung ngControl irgendwo auf den Eingang. Statt, der genaue code, den er geschrieben ist offen für interpretation. Ich weiß, mit ngModel Bindungen an reaktive Formen wird allgemein abgeraten, in der Dokumentation aber es ist verfügbar.
    • Ihre plunker gebrochen ist atm. Es ist Jahre später, aber, möchten Sie vielleicht wissen.
    InformationsquelleAutor silentsod
  3. 1

    Nicht sicher, warum die anderen Antworten versuchen, legen Variablen an den radio-Elementen, bei der die radios bereits Bestandteil der ngForm deshalb dazu ein myForm.valid funktionieren würde.

    Hier ist meins:

    <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>

    Nur ein f.valid tun sollte.

    InformationsquelleAutor Rexford
  4. 0

    Überprüfen mat-radio-Gruppe mit 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>
    • Herzlich willkommen auf Stack Overflow, während dieser code kann die Frage beantworten, die zusätzliche Bereitstellung von Kontext in Bezug auf, warum und/oder wie dieser code beantwortet die Frage, verbessert seine langfristige Wert.
    InformationsquelleAutor Amir Navid
Schreibe einen Kommentar