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模板中調用函數。 請改用屬性。 請閱讀此作為參考以獲得更多理解

為什么不應該在模板中使用函數