Angular 响应式表单 - 按钮禁用方法调用两次

Question

我有一个简单的案例来说明我的问题。

`

AppComponent.ts

`

`

 formGroup = new FormGroup({
    firstName:new FormControl(''),
    lastName: new FormControl('')
  });

  isValid(){
    console.log(this.formGroup);
    return true;
    
  }

`

`

AppComponent.html

`

`

<form [formGroup]="formGroup">
    <label>FirstName</label>
    <input [formControlName]="'firstName'" />
    <label>Last Name</label>
    <input [formControlName]="'lastName'" />
    <button type="submit" [disabled]="!isValid()" >Submit</button>
</form>

`

我的问题是，为什么我从 isValid 方法在控制台中看到两次 output？。 有什么理由吗？ 如果我以这种方式使用复杂的形式，它会影响应用程序性能吗？

注意：我 woundring 为什么 isValid 方法被调用了两次？

我排除了被调用一次的方法。

Answer 1

让我给你解释一下。 angular 里面有个东西叫Change Detection 。 这是Angular内部的一个内部机制。 此更改检测机制可识别UI中的更改、输入、output 属性以及绑定到 UI 上不同元素的属性中的值更改。

因此，只要在整个应用程序中检测到任何更改，angular 就会运行一个change detection周期来更新所有属性值以及 UI。

现在，让我们来回答你的问题。 您在isValid模板中调用 function 。 所以这里发生的事情是，每当在UI中检测到任何更改时，angular 都会在呈现整个 UI 时运行两次更改检测，这就是为什么您会看到两次console.log的原因。

为什么调用变化检测两次？

答案是，您将UI中的formGroup绑定到form元素。 所以最初，您的formGroup是未定义的，但稍后在您的代码中您正在创建一个reactive form 。 因此，当创建reactive form时， formGroup的值从未undefined更改为实际的reactive form object。因此，以这种方式， formGroup的值更改了 2 次。

它会影响应用程序的性能吗？

是的，它会极大地影响应用程序的性能，这就是为什么在 angular 中建议，不要直接在html模板中调用函数。 请改用属性。 请阅读此作为参考以获得更多理解

为什么不应该在模板中使用函数