0
- ボタンの[disabled]属性"NgForm.form.invalid"プロパティにバインドされています。
- フォームが無効（NgForm.form.invalid = true）の場合、送信ボタンは無効になりますが、これは正しい動作です。
- しかし、大規模なアプリケーションでは、ボタンは最初に有効になっていると表示され、無効に変更されます。
- これは、コンポーネントのライフサイクルの開始時に、フォームが有効であると考えられるためです。これは、下のplunker ngOnInitイベントとngAfterContentInitイベントからわかるようにです。私はボタンを無効として初期化されていることを確認するために取ると、フォームが有効になるまで無効のままにする必要がありどのようなアプローチ
https://plnkr.co/edit/OJEoafoPZpz8gaxEbTBb?p=previewボタン[disabled] = "NgForm.form.invalid"は、ngOnInitで有効なNgFormのためにフリッカーを無効にし、一度ページが読み込まれると無効になる
？フォームが有効であると見なされるコンポーネントライフサイクルの開始時に一時的な状態を避ける必要があります。
@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.
}
}