angular-material - 我可以将 mat-form-field 外包为自定义组件或指令吗?
问题描述
我有这个表单域:
<mat-form-field>
<input matInput type="password" placeholder="password" formControlName="password" autocomplete="new-password">
<mat-hint align="end">Must have one letter, and one number</mat-hint>
<mat-error *ngIf="password.invalid && password.touched" class="has-text-danger">
That password sucks...
</mat-error>
</mat-form-field>
我想将它用作自定义组件,例如:
<password-form-field formControlName="password"></password-form-field>
在父组件中给出 formControlName。这样的事情可能吗?
这样做的原因是我想在许多其他组件中使用它..
解决方案
您应该在组件中实现ControlValueAccessorpassword-form-field
以便能够password-form-field
与formControlName
. 这是一个例子;
https://medium.com/@majdasab/implementing-control-value-accessor-in-angular-1b89f2f84ebf
......
或者,您可以通过使用formControl
指令而不是formControlName
如下实现相同的结果:
首先你应该添加@Input
一个password-form-field
@Component({
selector: "password-form-field",
templateUrl: "./password-form-field.component.html",
styleUrls: ["./password-form-field.component.scss"]
})
export class PasswordFormFieldComponent {
@Input() formCtrl: FormControl;
constructor() {}
}
然后在你password-form-field.component.html
的如下使用它:
<mat-form-field>
<input matInput type="password" placeholder="password" [formControl]="formCtrl" autocomplete="new-password" />
<mat-hint align="end">Must have one letter, and one number</mat-hint>
<mat-error *ngIf="password.invalid && password.touched" class="has-text-danger">
That password sucks...
</mat-error>
</mat-form-field>
最后,您可以在任何地方使用它,如下所示;
/** if password is defined as a standalone FormControl */
<password-form-field [formCtrl]="password"></password-form-field>
或者
/** if password is defined in a FormGroup named myFormGroup */
<password-form-field [formCtrl]="myFormGroup.get('password')"></password-form-field>
推荐阅读
- python - 在 PyTorch 中实现 prox-linear 优化器
- typescript - TypeScript:使用默认值推断参数的类型
- python-3.x - geodjango:oserror:“找不到指定的程序”
- angular - 如何通过路由更改延迟加载应用程序
- python - 在 if 条件下替换数组后不返回新数组
- angular - 如何在 Angular 中使用 chartjs-plugin-annotation
- android - 膨胀类 com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton 时出错
- javascript - 如何将输入目标值和 setState 值作为辅助函数的参数传递?
- c# - c#将excel单元格值复制到数据行时出现无效转换异常
- php - 如何从 stdObj PHP 中检索电子邮件地址