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>