表单验证错误消息以角度提交时显示

Posted 2023-03-13

【中文标题】表单验证错误消息以角度提交时显示

【英文标题】：Form validation error message show on submit in angular

【发布时间】：2019-02-24 00:43:19

【问题描述】：

我正在尝试以 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)

  ]))

)

【问题讨论】：

相信如果您也在问题中发布代码会有所帮助。

@Ravindra：我认为单选按钮验证无法正常工作

在提交按钮上使用此代码来验证 Object.keys(formGroup.controls).forEach(key => formGroup.get(key).markAsTouched(); formGroup.get(key).updateValueAndValidity (););

【参考方案1】：

您必须在提交时将已提交标志设为真，并在以下条件下检查错误：<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

【参考方案2】：

您可以使用创建表单组并使用表单控件来验证数据。 Stackblitz https://stackblitz.com/edit/angular-6-reactive-form-validation-cy6avn

示例

组件.ts

constructor(private fb: FormBuilder)  
formSubmitted: boolean;
  testForm = this.fb.group(
    field1: ['', [Validators.required]],
    field2: ['', [Validators.required]],
  );

  isFieldValid(field: string) 
    return (
      this.testForm.get(field).errors && this.testForm.get(field).touched ||
      this.testForm.get(field).untouched &&
      this.formSubmitted && this.testForm.get(field).errors
    );
  

  onSubmit() 
    this.formSubmitted = true;
    if (this.testForm.valid) 
      alert('VALID');
     else 
      alert('NOT VALID');
    
  

component.html

<form [formGroup]="testForm">
    <div class="form-group">
        <label>First Name:</label>
        <input type="text" formControlName="field1">
        <div *ngIf="isFieldValid('field1')">
            <div style="font-size: 12px; color: red">
                NOT VALID
            </div>
        </div>
    </div>
    <div class="form-group">
        <label>Last Name:</label>
        <input type="text" formControlName="field2">
        <div *ngIf="isFieldValid('field2')">
            <div style="font-size: 12px; color: red">
                NOT VALID
            </div>
        </div>
    </div>
</form>
<div>
    <button (click)="onSubmit()">Submit</button>
</div>