Angular- react 形式 : How to validate fields after patchValue

Question

我有一个使用 ControlValueAccessor 的带有子表单的表单

profile-form.component.ts

form: FormGroup;
this.form = this.formBuilder.group({
        firstName: [],
        lastName: ["", Validators.maxLength(10)],
        email: ["", Validators.required]
      });

get lastNameControl() {
    return this.form.controls.lastName;
  }

initForm() {
    ...
       this.form.patchValue({
        firstName: "thompson",
        lastName: "vilaaaaaaaaaaaaaaaaaaaa",
        email: "abc@gmail.com"
      });
    ...
  }

profile-form.component.html

<label for="last-name">Last Name</label>
    <input formControlName="lastName" id="last-name" />
    <div *ngIf="lastNameControl.touched && lastNameControl.invalid" class="error">
      last name max length is 10
    </div>

问题:

初始数据已加载到表单中，但未触发验证(例如:未验证字段姓氏)。我必须触摸该字段，然后验证开始工作。

如何在 patchValue 完成后立即触发验证。

请引用代码:https://stackblitz.com/edit/angular-wg5mxz?file=src/app/app.component.ts

如有任何建议，我们将不胜感激。

Answer 1

To prevent the validator from displaying errors before the user has a chance to edit the form, you should check for either the dirty or touched states in a control.

When the user changes the value in the watched field, the control is marked as "dirty".When the user blurs the form control element, the control is marked as "touched".

你应该从你的 *ngIf 中删除 lastNameControl.touched

检查 https://angular.io/guide/form-validation了解更多信息