表单组值更改时不会触发更改检测 [英] Change detection does not trigger when the formgroup values change

问题描述

我创建了一个简单的示例来说明我面临的一个奇怪问题。

Stackblitz-

不是很奇怪。

请问有人可以解释一下吗？在不删除onpush更改检测的情况下，它的解决方法是什么。

解决方案

我找到了解决此问题的方法，尽管我不是确定是否是理想的解决方案。

我们可以侦听表单组的值更改，然后在输入组件中触发更改检测

  this.form.valueChanges.subscribe（（）=> {
 this.cdr.detectChanges（）
}）; 
  

这样，它会同时更新标签值和输入内容。

这是解决方法：

https://stackblitz.com / edit / angular-change-detection-form-group-value-change-issue-resolved

我不确定这是否是Angular的错误但很高兴我找到了一些解决方法：）

I have created a simple example to demonstrate a weird issue I'm facing.

Stackblitz - https://stackblitz.com/edit/angular-change-detection-form-group

I have three components and here are they:

1 - app component

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

@Component({
  selector: 'my-app',
  template: `<hello [form]="form"></hello>
  <hr />
  <button (click)="changeFormValue()">Change Form Value</button>`,
  styleUrls: ['./app.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush

})
export class AppComponent implements OnInit {
  name = 'Angular';

  form: FormGroup;

  ngOnInit() {
    this.form = new FormGroup({
      name: new FormControl('ABC'),
      age: new FormControl('24')
    });
  }

  changeFormValue() {
    this.form.setValue({
      name: 'XYZ',
      age: 35
    })
  }
}

2 - hello component

import { Component, Input, OnChanges, ChangeDetectionStrategy } from '@angular/core';
import { FormGroup } from '@angular/forms';

@Component({
  selector: 'hello',
  template: `<form [formGroup]="form">
  <app-input [form]="form"></app-input>
  </form>`,
  styles: [``],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class HelloComponent implements OnChanges {
  @Input() form: FormGroup;

  ngOnChanges(changes) {
    console.log(changes)
  }
}

3 - input component

import { Component, Input, OnInit, OnChanges, ChangeDetectionStrategy } from '@angular/core';
import { FormGroup } from '@angular/forms';

@Component({
  selector: 'app-input',
  template: `Name : <input type="text" [formControl]="nameFormcontrol" /> {{nameFormcontrol.value}} <br /><br />
  Age : <input type="text" [formControl]="ageFormcontrol" /> {{ageFormcontrol.value}}`,
  styles: [``],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class InputComponent implements OnInit, OnChanges {
  @Input() form: FormGroup;
  nameFormcontrol;
  ageFormcontrol;

  ngOnInit() {
    this.nameFormcontrol = this.form.get('name');
    this.ageFormcontrol = this.form.get('age');
  }

  ngOnChanges(changes) {
    console.log(changes)
  }
}

In both hello component and input component, I have set the changedetection strategy to onpush. As you see above I am creating a form group instance in the app component and passing that to the child components. Now when I click on the button on app component to change the form value, it changes the value in the input fields but not the plain texts. It only works if I delete the on push change detection from both the child components. Even the ngOnChanges does not get called even if the formgroup values are changing.

Is n't it weird. How the change detection works for inputs and not for the plain texts here?

Could someone explain me this please? And what is the workaround of it without removing the onpush change detection.

解决方案

I found a workaround to this problem although I am not sure if this is the ideal solution.

We can listen to the form group value changes and then trigger change detection in the input component

this.form.valueChanges.subscribe( () => {
  this.cdr.detectChanges()
});

This way it updates the label values as well along with the inputs.

Here is the solution:

https://stackblitz.com/edit/angular-change-detection-form-group-value-change-issue-resolved

I'm not sure if it's a bug from Angular but happy that I figured out some workaround :)

这篇关于表单组值更改时不会触发更改检测的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！