Как проверить радио кнопки с помощью ReactiveFormsModule в angularJS2?

Question

Я новичок в angularJS2, я пытаюсь изучить валидацию в форме angularJS2 с помощью ReactiveFormsModule. Теперь я застрял на том, как проверить кнопку Radio в angularJS2

Это мой код компонента

import { Component, OnInit } from '@angular/core'; 
import { FormGroup, FormBuilder, Validators } from '@angular/forms'; 

import { userDetails } from '../app/userDetails' 

@Component({ 
    selector: 'user-validation', 
    templateUrl: '../app/app.template.html' 
}) 
export class userComponent implements OnInit { 
    constructor(private fb: FormBuilder) { } 
    userForm: FormGroup; 
    users = new userDetails(); 
    ngOnInit(): void { 
     this.buildForm(); 
    } 

    buildForm(): void { 
     this.userForm = this.fb.group({ 
      'username': [this.users.username, [ 
       Validators.required, 
       Validators.minLength(4), 
       Validators.maxLength(24) 
      ] 
      ] 
     }); 

     this.userForm.valueChanges 
      .subscribe(data => this.onValueChanged(data)); 

     this.onValueChanged(); // (re)set validation messages now 
    } 
    onValueChanged(data?: any) { 
     if (!this.userForm) { return; } 
     const form = this.userForm; 

     for (const field in this.formErrors) { 
      // clear previous error message (if any) 
      this.formErrors[field] = ''; 
      const control = form.get(field); 

      if (control && control.dirty && !control.valid) { 
       const messages = this.validationMessages[field]; 
       for (const key in control.errors) { 
        this.formErrors[field] += messages[key] + ' '; 
       } 
      } 
     } 
    } 
    onSubmit() { 
     this.users = this.userForm.value; 
    } 
    formErrors = { 
     'username': ''   
    }; 

    validationMessages = { 
     'username': { 
      'required': 'Name is required.', 
      'minlength': 'Name must be at least 4 characters long.', 
      'maxlength': 'Name cannot be more than 24 characters long.', 
      'forbiddenName': 'Someone named "Bob" cannot be a hero.' 
     } 
    }; 
} 

HTML код

<form [formGroup]="userForm" (ngSubmit)="onSubmit()" class="form-group"> 
    <label>Gender</label> 
     <label><input type="radio" name="gender" /> Male</label> 
     <label><input type="radio" name="gender" />Female</label> 
     <button type="submit" [disabled]="!userForm.valid" class="btn btn-success">Submit</button> 
</form> 

Я не смог найти какой-либо документ связанные с проверкой радио кнопки в угловом JS2, даже здесь angular.io

Answer 1

базы на вашем коде, вы можете использовать подобное. Шаблон

this.userForm = this.fb.group({ 
    'username': [this.users.username, [ 
    Validators.required, 
    Validators.minLength(4), 
    Validators.maxLength(24) 
    ]], 
    'gender': [this.users.gender, Validators.required] 
}); 

HTML:

<form [formGroup]="userForm" (ngSubmit)="onSubmit()" class="form-group"> 
    <label>Gender</label> 
    <label><input type="radio" formControlName="gender" value="M" /> Male</label> 
    <label><input type="radio" formControlName="gender" value="F" />Female</label> 
    <button type="submit" [disabled]="!userForm.valid" class="btn btn-success">Submit</button> 
</form> 

Answer 2

Пожалуйста, перейдите по следующей ссылке, это определенно поможет вам. https://github.com/angular/angular/issues/7282

Попробуйте добавить следующий код в код компонента

this.userForm = this.fb.group({ 
    'username': [this.users.username, [ 
    Validators.required, 
    Validators.minLength(4), 
    Validators.maxLength(24) 
    ]], 
    'gender': [this.users.gender, Validators.required] 
});