使用angular 2进行表单验证

Question

Angular 2表单验证不起作用，我找不到我做错的地方。请帮助我解决此问题。

https://stackblitz.com/edit/angular-6-reactive-form-validation-jb2snp?file=app/app.component.ts

app.component.ts：

      this.registerForm = this.formBuilder.group({
        userType: ['', Validators.required],
        modalType: ['', Validators.required],
        place: ['', Validators.required], 
        onebhk: ['', Validators.required],
        twobhk: ['', Validators.required],
        min: ['', [Validators.required, Validators.minLength(3)]],
        max: ['', [Validators.required, Validators.minLength(6)]]
    });

Answer 1

html中的问题，对于单选按钮，formControlName和名称必须相同

像这样

<div class="col-md-4">
      <label>
          <input type="radio" formControlName="onebhk" name="onebhk" value="yes" /> 1 BHK
       </label>
       <label>
          <input type="radio" formControlName="twobhk" name="twobhk" value="no" /> 2 BHK
        </label>
  </div>

Answer 2

您不应同时使用 name 和 formControlName ：

DEMO

解决方案图片

HTML：

sub

Answer 3

从此控件name和name="onebhk"删除name="twobhk"属性

<div class="col-md-4">
      <label>
          <input type="radio" formControlName="onebhk" value="yes" /> 1 BHK
      </label>
      <label>
          <input type="radio" formControlName="twobhk" value="no" /> 2 BHK
      </label>
</div>