Угловая 2+ проверка формы из нескольких частей, как проверить правильность одного ввода

Question

У меня есть форма, и форма имеет несколько входов, которые связаны с различными переменными. Перед отправкой формы мне нужно выполнить проверки достоверности, нетронутые проверки и т. Д. Например, я хочу, чтобы кнопка отправки была отключена, если каждая часть формы является нетронутой или что-то недопустимо.

Используя Angular 5, я пытаюсь получить доступ к флагам .pristine, .valid и .invalid для каждого поля ввода, но значения либо не определены, либо "не может получить .pristine of undefined".

Я могу получить эти флаги на всей форме, но это не помогает, потому что я хочу знать, как получить их для каждого отдельного ввода.

Вот мой текущий код (я удалил несколько своих входных данных, чтобы упростить пример).

<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, но другие значения возвращают неопределенное значение.

Как проверить достоверность этих отдельных входных данных?

РЕДАКТИРОВАТЬ: я понимаю, что я могу получить всю эту информацию внутри моего компонента, потому что все входные значения связаны. Однако было бы легче просто отметить один или два флага.

Answer 1

Вы можете получить доступ к элементам управления вводом, используя свойство .controls, например:

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

Answer 2

Создан стек-блиц. https://stackblitz.com/edit/angular-5ir4k7

Добавлена ​​ссылочная переменная шаблона для ngModel и проверка с использованием isValid.

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>

Просто чтобы прояснить, отдельные поля формы всплывают до самой формы. Таким образом, если какое-либо поле было затронуто, тогда вся форма будет нетронутой == ложь.