按钮 [禁用]= "NgForm.form.invalid"导致闪烁禁用，因为 NgForm 在 ngOnInit 上有效，然后在页面加载后无效

Question

• 我有一个NgForm的提交按钮，该按钮的[disabled]属性绑定到"NgForm.form.invalid"属性。
• 当表单无效(NgForm.form.invalid = true(时，提交按钮被禁用，这是正确的行为。
• 但是，在我的大型应用程序中，该按钮首先显示为已启用，然后更改为禁用。
• 我认为这是因为在组件生命周期开始时，表单被认为是有效的，从下面的 plunker ngOnInit 和 ngAfterContentInit 事件中可以看出。

https://plnkr.co/edit/OJEoafoPZpz8gaxEbTBb?p=preview

我应该采取什么方法来确保按钮初始化为禁用，然后在表单有效之前保持禁用状态？我需要避免在组件生命周期开始时的临时状态，在该状态中，表单被视为有效...即使不是。

@Component({
selector: 'my-app',
template: `
<h1>app.component</h1>
<form #fruitForm="ngForm">
<input [(ngModel)]="fruit" name="fruit" required type="text">
<button type="submit" [disabled]="fruitForm.form.invalid">Save</button>
</form>
<div>
{{atNgOnInit}}
<br>{{atNgAfterContentInit}}
<br>currently... fruitForm.form.valid?: {{fruitForm.form.valid}}
</div>
`,
})
export class App implements OnInit, AfterContentInit {
public fruit = '';
public atNgOnInit = '';
public atNgAfterContentInit = '';
@ViewChild('fruitForm') fruitForm: NgForm;
ngOnInit() {
this.atNgOnInit = `ngOnInit event... fruitForm.form.valid?: ${this.fruitForm.form.valid}`;
// REPORTS FORM TO BE VALID.
}
ngAfterContentInit() {
this.atNgAfterContentInit = `ngAfterContentInit event... fruitForm.form.valid?: ${this.fruitForm.form.valid}`;
// REPORTS FORM TO BE VALID.
}
}

Answer 1

我改变了使用角度反应形式而不是模板表单的方法......反应形式似乎更容易控制，上述问题已经消失。