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

Posted 2023-03-13

【中文标题】Angular 2+多部分表单验证，如何检查单个输入的有效性

【英文标题】：Angular 2+ multi-part form validation, how to check validity of single input

【发布时间】：2019-02-06 19:04:26

【问题描述】：

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

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

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

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

【参考方案1】：

创建了一个堆栈闪电战。 https://stackblitz.com/edit/angular-5ir4k7

为 ngModel 添加模板引用变量并使用 isValid 进行验证。

【参考方案2】：

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

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

【参考方案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。

【讨论】：

为了记录，实际的name属性是否需要与创建的变量匹配？这里的名字是“name”，变量名也是#name。名称可以是“myName”而变量是#nameForm 还是其他名称？此外，每当我尝试将表单标记变量设置为 ngModel 时，我都会收到错误消息——#name="ngModel" 是否仅在嵌套在 #editDetailForm="ngForm" 中时才有效？

不，不必是同名。您可以将模板变量设置为您想要的任何值。在示例中使用相同的名称是很常见的。它仅在嵌套在表单中时才有效，如果您需要将表单设置为模板变量，则无效。