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

Question

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

<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: Cannot read property 'valid' of undefined" 错误。如何解决这个错误？

Answer 1

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

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

@ViewChild('f') f: NgForm;

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

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

Stackblitz Example

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

How to add [disabled]='!f.valid' to submit button using ng-content in angular 4?

forms

angular2-ngcontent

angular