Angular 9：禁用属性在 chrome 和 IE 11 中的不同行为

Question

我有一个带有 fromGroup 和一堆表单控件的简单模板，如果表单有效，我会尝试启用一个按钮。

.ts:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  formGroup: FormGroup;
  constructor(public formBuilder: FormBuilder) {
  }
  ngOnInit(): void {
    this.formGroup = this.formBuilder.group({
      firstName: ['', Validators.minLength(3)],
      lastName: ['', Validators.minLength(5)]
    });
  }
}

.html:

<form [formGroup]="formGroup">
  <div>
    <span>Name</span>
    <input type="text" formControlName="firstName">
  </div>
  <div>
    <span>Name</span>
    <input type="text" formControlName="lastName">
  </div>
  <div>
    <span>Test</span>
    <input [disabled]="!formGroup.valid" type="text">
  </div>
</form>

从上面的例子来看，默认情况下按钮应该被禁用，一旦表单有效我应该能够看到按钮被启用，在 chrome 它按预期工作但不是在 IE 11 中（控制台中没有错误），查看了一些解决方案，但没有解决我的错误，有什么建议吗？？

Answer 1

找到解决方案 ChangeDetectorRef.detectChanges(); 解决了我的问题。

this.formGroup.valueChanges.subscribe(() => {
 this.changeRef.detectChanges();
});

Angular 9：禁用属性在 chrome 和 IE 11 中的不同行为

Angular 9: disabled attribute different behavior in chrome and IE 11

javascript

angular

angularjs-directive