angularJS2でReactiveFormsModuleを使用してラジオボタンを検証する方法は？

Question

私はangularJS2を初めて使用しています。私は、ReactiveFormsModuleを使って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> 

あるangularJS2

にラジオボタンを検証する方法について

を立ち往生していますangularJS2のラジオボタンの検証に関連して、ここでも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] 
});