5

我有角形。

当我打开应用程序时，控制台在in fooValidation没有我的情况下记录了四次。

in fooValidation
in fooValidation
in fooValidation
in fooValidation

为什么？这是设计的吗？如何使其仅在提交表单后或关注指定字段时执行？

import { Component } from "@angular/core";
import { FormGroup, FormControl } from '@angular/forms';

const fooValidation = () => {
  console.log('in fooValidation ');

  // check two fields here
  return { error: true };
}

@Component({
  selector: "my-app",
  template: `
      <form [formGroup]="profileForm">
    
        <label>
          First Name:
          <input type="text" formControlName="firstName">
        </label>
  
        <label>
          Last Name:
          <input type="text" formControlName="lastName">
        </label>
  
      </form>
    `
})
export class AppComponent {
  name = "Angular";

  profileForm = new FormGroup({
    firstName: new FormControl(""),
    lastName: new FormControl("")
  }, {
    validators: [fooValidation]
  });
}

堆栈闪电战示例

4

1 回答 1

1

这是意料之中的。验证应该非常简单，所以通常不是问题。现在为什么有4个：

  1. 在打字稿中创建 FormGroup。它已创建并应检查以定义它是否处于错误状态
  2. [formGroup] 指令注册控制并再次调用验证，因为在某些情况下某些情况可能会发生变化（不确定究竟是哪个，但可能是一些问题导致该行为使一切正常）
  3. 和 4.formControlName指令完全一样
于 2020-07-29T09:34:51.837 回答