Angular 2多部分表单验证，如何检查单个输入的有效性

Question

我有一个表单，表单有多个输入，它们都绑定到不同的变量。在提交表单之前，我需要进行有效性检查、原始检查等。例如，如果表单的每个部分都是原始的，或者如果某些内容无效，我希望禁用“提交”按钮。

使用Angular 5，我试图访问每个输入字段的.pristine、.valid和.invalid标志，但值未定义或“无法获取未定义的.pristine”。

我能够在整个表单上获得这些标志，但这没有帮助，因为我想知道如何为每个单独的输入获得这些标志。

这是我当前的代码（为了简化示例，我删除了许多输入）。

<form #editDetailsForm="ngForm" name="editDetailsForm" >
    <label for="name"> Name </label>
    <input type="text" id="name" name="name" maxlength="40" [(ngModel)]="myName" required />

    <label for="description"> Description </label>
    <textarea id="description" name="description" maxlength="250" [(ngModel)]="myDescription" required ></textarea>

    <button id="submit" type="button"
        [disabled]="saveButtonDisabled(editDetailsForm.invalid, editDetailsForm.name.invalid, editDetailsForm.description.invalid)"
        (click)="updateDetails()" >
        Save
    </button>
</form>

如果您看到，我将Save按钮上的disabled属性绑定到saveButtonDisabled（）函数，在该函数中我要传递有关每个输入有效性的信息。第一个参数，editDetailsForm.invalid返回true或false，但其他值返回undefined。

如何检查这些单独输入的有效性？

编辑：我意识到我可以在我的组件中导出所有这些信息，因为所有的输入值都是绑定的。不过，只需检查一两个标志就更容易了。

Answer 1

制造了一场闪电战。https://stackblitz.com/edit/angular-5ir4k7

为ngModel添加了模板参考变量，并使用isValid进行验证。

Answer 2

您可以使用.controls属性访问输入控件，如：

    <button id="submit" type="button"
    [disabled]="editDetailsForm.controls.name?.invalid || editDetailsForm.controls.description?.invalid">

Answer 3

我不确定我是否完全理解你想要做什么，但这是你访问表单控件的方式。原始的，。

 <input type="text" id="name" name="name" #name="ngModel" maxlength="40" [(ngModel)]="myName" required />

#name="ngModel"设置FormControl角创建的模板引用

那么你应该可以做这样的事情：

<input type="text" id="name" name="name" #name="ngModel" maxlength="40" [(ngModel)]="myName" required />
<div *ngIf="name.pristine">
  Name is Pristine
</div>

为了澄清，单个表单字段会冒泡到表单本身。所以如果任何领域被触及，那么整个形式将是原始的==假的。