有一个包含电子邮件、密码字段和提交按钮的表单组件通过 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:无法读取未定义的属性‘有效’”错误。如何解决此错误?