Форма ViewChild не получает значение поля ввода в компоненте

Question

Кодекс объясняет проблему. Я не могу использовать #myForm для доступа к проверке поля ввода из контроллера с помощью ViewChild this.myForm.name

        <form role="form" name="myForm" #myForm="ngForm">
           <div>...
             <div>....
               <input #name=ngModel type="text"/>
               <div class="error" *ngIf="!name.valid && (!name.untouched || showErrors)">Please enter a recipient name</div>
             </div>
           </div>
         </form>

Теперь контроллер:

 export class A imports .... {
      @ViewChild('myForm') myForm;

      private validate() {
        // this.myForm.name is undefined. I don't know why.
        if (this.myForm.name && this.myForm.name.$invalid) {
          return;
        }
      }
 }

Answer 1

1) Вы должны добавить директиву ngModel к вашему входу и добавить атрибут name, как показано ниже.

<input #name="ngModel" ngModel type="text" name="name" />

Почему "ngModel"? Свойство exportAs директивы сообщает Angular, как связать ссылочную переменную с директивой. Вы устанавливаете name в ngModel, потому что свойство exportAs директивы ngModel оказывается "ngModel".

2) В вашем компоненте вы должны использовать.controls.name вместо.name

if (this.myForm.controls.name && this.myForm.controls.name.$invalid) {
   return;
}

Answer 2

Я думаю, что есть одна опечатка: #name=ngModel должно быть довольно #name="ngModel"