Angular 6模板驱动的表单 - 禁用编辑表单上的提交按钮

Question

我正在Angular组件中创建一些模板驱动的表单。目标显然是在所有字段都有效之前不让用户提交表单。当我让用户发送 POST 请求时，即从头开始创建一些东西时，这很有效。

但是，当我有一个表单来更新某些内容时，它允许用户在表单可能尚未生效之前提交表单。这是因为当我预填充表单时，状态发生了变化吗？我需要更改什么以确保按钮在完全有效之前保持禁用状态？

<form class="form-horizontal" #editMPForm="ngForm" (ngSubmit)="editMonitoringPoint()">
<div class="form-group">
<table>
<tbody>
<tr>
<td class="left_td">
<p>Monitoring Point Name *</p>
<input type="text" id="name" required #name="ngModel" [class.is-invalid]="name.invalid && name.touched" 
[ngClass]="{ 'is-invalid': editMPForm.submitted && name.invalid }" name="name" [(ngModel)]="updated_mp.name" class="form-control" placeholder="e.g., A123 Outfall NW"/>
<small class="text-danger" [class.d-none]="name.valid  || !editMPForm.submitted">Name is required</small>
</td>
<td class="left_td">
<p>Timezone *</p><i class='fa fa-info-circle op-icon' matTooltip="Timezone in which the Monitoring Point is Located"></i>
<select class="col-md-12 form-control" [(ngModel)]="updated_mp.timezone" name="timezone" #timezone="ngModel" id="timezone" required [ngClass]="{ 'is-invalid': editMPForm.submitted && timezone.invalid }">
<option value="" disabled selected>Choose...</option>
<option value="America/Puerto_Rico">Puerto Rico (Atlantic)</option>
<option value="America/New_York">Eastern Time (US & Canada)</option>
<option value="America/Chicago">Central Time (US & Canada)</option>
<option value="America/Denver">Mountain Time (US & Canada)</option>
<option value="America/Phoenix">Arizona</option>
<option value="America/Los_Angeles">Pacific Time (US & Canada)</option>
<option value="America/Anchorage">Alaska</option>
<option value="Pacific/Honolulu">Hawaii Standard Time</option>
</select>
<small class="text-danger" [class.d-none]="timezone.valid  || !editMPForm.submitted">Timezone is required
</small>
</td>
</tr>
</tbody>
</table>
<button type="submit">Save Edits</button>
</div>
</form>

部分问题在于，自首次创建项目以来，模型要求已更改。例如，在不需要添加时区时创建的项目，现在要求您在使用编辑表单时添加时区。我不希望我的表单让您在不添加所需时区的情况下提交。

如果我能提供更多信息，请告诉我！谢谢

Answer 1

您可以像这样为按钮设置禁用属性：

<button type="submit" [disabled]="!editMPForm.form.valid">Save Edits</button>