Question

以下面的形式为例：

<form [formGroup]="MyGroup" (ngSubmit)="onSubmit(MyGroup)">
   <input type="email" value="{{data.email}}" formControlName="email">
</form>

...

MyGroup = new FormGroup({
    email: new FormControl('', [
        Validators.required,
        Validators.email
    ]),
...

onSubmit(form) {
   console.log(form.controls['email'].hasError('required'));
}

如果在不修改invalid字段的情况下提交表单，则始终会触发email验证结果。

如果浏览器自动填充表单数据，也是如此。

我的问题是：有没有办法重新验证FormGroup字段而不管untouched状态？

Answer 1

更新：

在玩完演示之后，看起来如果将值传递给表单控件，验证工作将按预期进行。

this.MyGroup = new FormGroup({
      email: new FormControl(this.data.email, [
        Validators.required,
        Validators.email
      ]
      )
    })

参见演示：

https://stackblitz.com/edit/angular-7r7s8k?file=app%2Fhello.component.ts

Answer 2

您需要设置输入的名称属性。
参见https://www.w3schools.com/tags/att_input_name.asp

定义和用法   name属性指定元素的名称。

name属性用于引用JavaScript中的元素，或在提交表单后引用表单数据。

注意：只有具有name属性的表单元素才会在提交表单时传递其值。

一个简单的测试-为您自己编写一个测试验证器，您将看到它永远不会在自动填充中被调用，除非您将name属性设置为某种东西。

export class TestComponent implements OnInit {

  projectStatus = ['Stable', 'Critical', 'Finished'];

  builderForm = this.builder.group({
    email: ['',
      [Validators.required,
        Validators.email,
        TestComponent.emailTestValidator()]],
  });

  static emailTestValidator(): ValidatorFn {
    return (control: AbstractControl): ValidationErrors | null => {
      console.log('Email Test Validator Hit');
      return null;
    };
  }

模板：

<label class="as7-label">
  Email:
  <input type="email"
         name="as7email"
         placeholder="john@doe.com"
         formControlName="email">
</label>

如果跳过name属性，验证器将永远不会被击中

Angular 4/5：如果不受影响或浏览器自动填充，则字段无效

2 个答案: