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

我认为有一个错字：#name=ngModel应该是#name="ngModel"

Answer 2

1）您应该在输入中添加ngModel指令，并添加name属性，如下所示。

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

为什么要使用“ ngModel”？指令的exportAs属性告诉Angular如何将引用变量链接到指令。您将名称设置为ngModel 因为ngModel指令的exportAs属性恰好是 “ ngModel”。

2）在组件中，应使用.controls.name而不是.name

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

窗体ViewChild不在组件中获取输入字段值

2 个答案: