出于設計原因，我在外部 div 中有以下帶有關閉和保存按鈕的 Angular Material 表單：
<h1 mat-dialog-title>Product Page</h1>
<div mat-dialog-content>
<form [formGroup]="productForm">
<mat-form-field appearance="outline">
<mat-label>Name</mat-label>
<input formControlName="name" required matInput placeholder="Name" style="text-transform:uppercase">
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>Weight</mat-label>
<input type="number" required formControlName="weight" matInput placeholder="weight">
</mat-form-field>
</form>
</div>
<div mat-dialog-actions [align]="'end'">
<button mat-raised-button color="warn" mat-dialog-close>Close</button>
<button mat-raised-button color="primary" (click)="saveProduct()">Save</button>
</div>
當表單欄位為空但引數不起作用時，我想禁用“保存”按鈕，required因為按鈕位于外部 div 中。有沒有辦法將按鈕與表單相關聯，以便在填寫必填欄位之前禁用“保存”按鈕？
uj5u.com熱心網友回復：
您可以手動系結它：
<button (click)="submit()" [disabled]="!form.valid">Submit</button>
或者，您可以通過提供表單作為主容器在模態中作弊（是的，它有效）
<form [formGroup]="form">
<h1 mat-dialog-title>...</h1>
<div mat-dialog-content>...</div>
<div mat-dialog-actions align="end">
<button type="submit" [disabled]="!form.valid">Submit</button>
</div>
</form>
uj5u.com熱心網友回復：
您可以向您的 formGroup 添加驗證并使用 formGroup 將按鈕設定為禁用：
在您的組件上：
constructor(fb:FormBuilder
(...)
) {
this.productForm = fb.group({
name: [null, Validators.required]
(...)
})
}
然后在您的模板上，調整按鈕：
<button mat-raised-button color="primary" [disabled]="productForm.invalid" (click)="saveProduct()">Save</button>
您不妨從輸入中洗掉“必需”（因為角度會在控制臺中警告您）：
<input formControlName="name" matInput placeholder="Name" style="text-transform:uppercase">
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/488620.html