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 返回真或假，但其他值返回未定义。

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

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

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

我不确定我是否完全理解您想要做什么，但这是您访问表单控件 .pristine、.invlaid 的方式

 <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>

澄清一下，各个表单字段会冒泡到表单本身。因此，如果触摸了任何字段，则整个表单将是原始的 == false。