Angular 5 반응형 - 라디오 버튼 그룹

Angular 5 반응형 - 라디오 버튼 그룹

두 개의 라디오 버튼이 있습니다. 반응형 양식을 사용하고 있으며 구성 요소 내에 양식 컨트롤을 추가했습니다.제가 직면한 문제는 이름 특성이 formControlName 형식과 같아야 한다는 것입니다.이름 속성을 동일하게 설정할 때, 하나의 라디오 단추만 선택할 수 있습니다. 다른 하나의 라디오 단추를 선택하거나 선택을 취소할 수 없습니다.동일한 항목만 선택할 수 있습니다.

this.genderControl = new FormControl("", Validators.required);

양식 그룹에 추가했습니다.

genderControl: this.genderControl,

내 HTML:

<div class="radio-inline">
  <input id="gender" type="radio" name="genderControl" formControlName="genderControl" />
  <label class="radio-label"> Male</label>
  <input id="gender" type="radio" name="genderControl" formControlName="genderControl" />
  <label class="radio-label">Female</label>
</div>

양식 그룹

    this.personalInfo = new FormGroup({
  searchControl: this.searchControl,
  titleControl: this.titleControl,
  firstNameControl: this.firstNameControl,
  middleNameControl: this.middleNameControl,
  lastNameControl: this.lastNameControl,
  birthdayControl: this.birthdayControl,
  genderControl: this.genderControl,
  phoneControl: this.phoneControl,
  taxCanadaControl: this.taxCanadaControl,
  provinceControl: this.provinceControl,
  countryControl: this.countryControl,
  taxCountryControl: this.taxCountryControl,

  creditControl: this.creditControl
});

코드를 시도했지만 양식 ControlName에 값을 할당하거나 바인딩하지 않았습니다.

HTML 파일:

<form [formGroup]="form">
   <label>
     <input type="radio" value="Male" formControlName="gender">
       <span>male</span>
   </label>
   <label>
     <input type="radio" value="Female" formControlName="gender">
       <span>female</span>
   </label>
</form>

TS 파일에서:

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

반응형 양식을 올바르게 사용해야 합니다.[formGroup]="form"이름 속성이 필요하지 않습니다.

내 샘플에서. 단어들.male그리고.female스팬 태그는 라디오 버튼을 따라 표시되는 값입니다.Male그리고.Female값이 바인딩됨formControlName

스크린샷을 참조하십시오.

더 짧게 하려면:

<form [formGroup]="form">
  <input type="radio" value='Male' formControlName="gender" >Male
  <input type="radio" value='Female' formControlName="gender">Female
</form>

usg 부울 true False를 도출하려면 값 주위에 "[]"을 추가해야 합니다.

<form [formGroup]="form">
  <input type="radio" [value]="true" formControlName="gender">Male
  <input type="radio" [value]="false" formControlName="gender">Female
</form>

각도 16:

HTML 파일:

<form action="POST" [formGroup]="registerForm" (submit)="processRegister()">
  <h1>Register</h1>
  <div>
    <label for="">Gender</label>
    <div>
      <input type="radio" id="male" name="gender" value="male" formControlName="gender">
      <label for="male">male</label>
      <input type="radio" id="female" name="gender" value="female" formControlName="gender">
      <label for="female">female</label>
    </div>
  </div>
  <button type="submit" >
    Submit
  </button>
</form>

Ts 파일:

export class RegisterComponent {
  registerForm = this.builder.group({
    gender: this.builder.control('male')
  })

  constructor(private builder: FormBuilder, private toastr: ToastrService, private service: AuthService, private router: Router){

  }

  processRegister() {
    console.log("value form register: ", this.registerForm.value)
    if(this.registerForm.valid) {
      this.service.processRegiter(this.registerForm.value).subscribe((res) => {
        this.toastr.success("Please contact admin for enable access", "Register success")
        this.router.navigate(["login"])
      })
    }else{
      this.toastr.warning('Please enter valid data');
    }
  }
}

언급URL : https://stackoverflow.com/questions/49078286/angular-5-reactive-forms-radio-button-group