angular - 以 Angular 提交时显示表单验证错误消息

Question

我正在尝试验证 Angular 6 中的表单，但不起作用。我的代码在 stackblitz 中。 如何验证该表单以及如何显示错误消息？ https://stackblitz.com/edit/angular-6-reactive-form-validation-ctzf7f?file=app/app.component.html

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

TS:

  this.registerForm=new FormGroup({
  userType:new FormControl('',Validators.compose([
    Validators.required 
  ])),
  modalType:new FormControl('',Validators.required),
  place:new FormControl('',Validators.required),
  onebhk:new FormControl('',Validators.required),

  min:new FormControl('',Validators.compose([
    Validators.required,
    Validators.min(200) 

  ])),
  max:new FormControl('',Validators.compose([
    Validators.required,
    Validators.max(2000)

  ]))

})

Answer 1

您必须在提交时将已提交标志设置为 true，并检查以下条件的错误:
<p style="color:red" *ngIf="!registerForm.controls.userType.valid && submitted">Required</p>

这是您的解决方案。 https://stackblitz.com/edit/angular-6-reactive-form-validation-cxzbr6?file=app/app.component.ts