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>

如果看到的話，我將“保存”按鈕上的“ 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 angular創建的模板引用

然后，您應該可以執行以下操作：

<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進行了驗證。