将 formControl 标记为已验证/已检查？

Question

当输入无效但仅在提交表单后，我想在我的输入字段下方显示一条错误消息。

我可以简单地使用布尔值并在表单提交后立即切换它，并将其作为显示消息的条件，但我不能在我的应用程序中执行此操作，因为它有点复杂。

在提交响应式表单时，我将每个控件标记为已触摸，并在 *ngIf 中为错误提示使用已触摸的布尔值作为条件。

Object.keys(selectForm.controls).forEach(key => {
   selectForm.get(key).updateValueAndValidity();
   if(!selectForm.get(key).valid) {
     selectForm.get(key).markAsTouched();
   } 
})

此解决方案并不完美，因为当用户只是“触摸”输入时也会弹出错误提示文本。

<form [formGroup]="selectForm">
    <p-dropdown [options]="items" formControlName="selected" placeholder="Select" (onChange)="save()"></p-dropdown>
    <p-message *ngIf="selected.invalid && selected.errors.required && selected.touched" severity="error" text="Field is required"></p-message>
</form>

基本上我在看类似nestedForm.get(key).markAsChecked() 但这不存在。

这里的解决方案是什么？

Answer 1

您可以通过使用errorMessageBindingStrategy 或@rxweb/reactive-form-validators 来实现此目的。

您只需在 app.component.ts 中设置 "errorMessageBindingStrategy":1，如下所示：

 ngOnInit(){
    //if you want to apply global configuration then use below code. 
    ReactiveFormConfig.set({
      "validationMessage":{
        "required":"This field is required"
        },
        "reactiveForm":{
          "errorMessageBindingStrategy":1
        }});
  }

并在提交方法上将RxFormGroup 的submitted 属性设置为true，您希望通过该方法显示如下错误消息：

 OnSubmit() {
    this.selectForm.submitted = true;
  }

完整的组件代码

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormArray, FormBuilder } from "@angular/forms"
import { RxFormBuilder, RxFormGroup, RxwebValidators } from '@rxweb/reactive-form-validators';


@Component({
  selector: 'app-errormessagestrategy-onsubmit-validator',
  templateUrl: './errormessagestrategy-onsubmit.component.html'
})
export class ErrormessagestrategyOnsubmitValidatorComponent implements OnInit {
  selectForm: RxFormGroup

  constructor(
    private formBuilder: RxFormBuilder, private fb: FormBuilder) { }

  ngOnInit() {
    this.selectForm = <RxFormGroup>this.formBuilder.group({
      userName: ['', RxwebValidators.required()],
      password: ['', RxwebValidators.required()],
      address: this.formBuilder.group({
        city: ['', RxwebValidators.required()]
      })
    });

  }

  OnSubmit() {
    this.selectForm.submitted = true;
  }


}

完整的 HTML 代码

<div>
    <form [formGroup]="selectForm">
        <div class="form-group">
            <label>User Name</label>
        <input type="text" formControlName="userName" class="form-control"  />
       <small class="form-text text-danger">{{selectForm.controls.userName.errorMessage}}<br/></small>  
      </div>
      <div class="form-group">
        <label>Password</label>
        <input type="text" formControlName="password" class="form-control"  />

      <small class="form-text text-danger">{{selectForm.controls.password.errorMessage}}<br/></small>
      </div>


        <div class="form-group" [formGroup]="selectForm.controls.address">
            <label>City</label>
            <input type="text" formControlName="city" class="form-control" />
            <small class="form-text text-danger">{{selectForm.controls.address.controls.city.errorMessage}}<br/></small>
        </div>

      <button (click)="OnSubmit()" class="btn btn-primary">Submit</button>
    </form>
  </div>

Working Example