使用角度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和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>

Answer 3

您不应该同时使用name和formControlName：

DEMO

解决方案的图像

HTML：

<!-- main app container -->
<div class="jumbotron">
    <div class="container">

        <form [formGroup]="registerForm" (ngSubmit)="onSubmit()">

            <div class="row show-grid">
                <div class="col-md-8 border">

                    <div class="row">
                        <div class="col-md-5">
                            <div class="form-group">
                                <label>Flat Name:</label>
                                <select id="type" formControlName="userType" class="form-control">
                                    <option value="null">Select</option>
                                    <option *ngFor="let userType of userTypes">{{userType}}</option>
                                </select>

                                <p style="color:red" *ngIf="registerForm.get('userType').hasError('required') && registerForm.get('userType').touched"> Required</p>
                            </div>
                        </div>
                        <div class="col-md-5">
                            <div class="form-group">
                                <label>Modal</label>
                                <select id="type" formControlName="modalType" class="form-control">
                                    <option value="null">Select</option>
                                    <option *ngFor="let modalType of modalTypes">{{modalType}}</option>
                                </select>
                                <p style="color:red" *ngIf="registerForm.get('modalType').hasError('required') && registerForm.get('modalType').touched">
                                    Required</p>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-5">
                            <div class="form-group">
                                <label>Place</label>
                                <input type="text" formControlName="place" class="form-control" />
                                <p style="color:red" *ngIf="registerForm.get('place').hasError('required') && registerForm.get('place').touched"> Required</p>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Home type</label>
                        <div class="col-md-4">
                            <label>
                                    <input type="radio" formControlName="onebhk"  value="yes" /> 1 BHK
              </label>
                            <p style="color:red" *ngIf="registerForm.get('onebhk').hasError('required') && registerForm.get('onebhk').touched"> Required</p>
                            <label>
                                    <input type="radio" formControlName="twobhk"  value="no" /> 2 BHK
              </label>
                            <p style="color:red" *ngIf="registerForm.get('twobhk').hasError('required') && registerForm.get('twobhk').touched"> Required</p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-5">
                            <div class="form-group">
                                <label>Min</label>
                                <input type="text" formControlName="min" class="form-control" />
                                <p style="color:red" *ngIf="registerForm.get('min').hasError('required') && registerForm.get('min').touched"> Required</p>
                                <p style="color:red" *ngIf="registerForm.get('min').hasError('minlength')"> Minimum length should be 3</p>
                                <p style="color:red" *ngIf="registerForm.get('min').hasError('min')"> Minimum 200</p>


                            </div>
                        </div>
                        <div class="col-md-5">
                            <div class="form-group">
                                <label>Max</label>
                                <input type="text" formControlName="max" class="form-control" />
                                <p style="color:red" *ngIf="registerForm.get('max').hasError('required') && registerForm.get('max').touched">Required</p>

                                <p style="color:red" *ngIf="registerForm.get('max').hasError('minlength') "> Minimum length should be 6</p>

                                <p style="color:red" *ngIf="registerForm.get('max').hasError('max')"> Maximum 200000</p>
                            </div>
                        </div>
                    </div>

                </div>

                <div class="col-md-4 border">
                    <div class="row">
                        <div class="form-group">
                            <button class="btn btn-primary">Submit</button>
                        </div>
                    </div>
                </div>
            </div>

        </form>

    </div>
</div>