Question

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

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

我能够在整个表单本身上获取这些标志，但这无济于事，因为我想知道如何为每个单独的输入获取它。

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

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

如果看到的话，我将“保存”按钮上的disabled属性绑定到saveButtonDisabled()函数，我想在其中传递有关每个输入有效性的信息。第一个参数editDetailsForm.invalid返回true或false，但其他值返回undefined。

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

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

Answer 1

我不确定我是否完全了解您想做什么，但这就是您访问表单控件.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。

Answer 2

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

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

Answer 3

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

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

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

3 个答案: