forms - 如何添加 [disabled]='!f.valid' 以使用角度 4 中的 ng-content 提交按钮？

Question

有一个包含电子邮件、密码字段和提交按钮的表单组件通过 ng-content 传递，以便可以显示登录表单“登录”按钮和注册表单“注册”按钮。表单组件模板代码：

<form #f="ngForm" (ngSubmit)="onSubmit(f.value)">

  <div class="form-group">
     <label for="email">Email</label>
     <input type="email" 
     class="form-control" 
     placeholder="Enter email address"
     name="email"
     ngModel
     >
  </div>

  <div class="form-group">
       <label for="password">Password</label>
       <input type="password" 
       class="form-control" 
       placeholder="Enter the password"
       name="password"
       ngModel
       >
  </div>


  <ng-content select="[submitbtn]" ></ng-content>

表单的父组件代码：

  <div class="row">
          <div class="col-md-6">
            <!--For Login-->
            <app-form-content>

        <button type="submit" class="btn btn-default" submitbtn>Login</button>
            </app-form-content>
          </div>
           <!--For register-->
          <div class="col-md-6">
             <app-form-content>
               <button type="submit" class="btn btn-default" [disabled]="!f.valid" submitbtn>Register</button>
             </app-form-content>
          </div>
      </div>

运行此代码后，出现“TypeError：无法读取未定义的属性‘有效’”错误。如何解决此错误？

Answer 1

您不能在父模板中使用模板引用变量 #f，因为它的范围是声明它的整个模板。

为了在父模板中访问此变量，我建议您在表单组件中声明属性：

@ViewChild('f') f: NgForm;

之后，您可以从父模板#formContent中的父模板引用中获取此属性，例如：

<app-form-content #formContent>
   <button type="submit" class="btn btn-default" [disabled]="!formContent.f.valid" 

Stackblitz 示例