Angular material 是否可以将mat表单字段作为自定义组件或指令外包？

我有这个表单字段：

    <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。这样的事情可能吗

原因是我想在许多其他组件中使用它。

您应该在

密码表单字段

组件中实现，以便能够将

密码表单字段

与

formControlName

一起使用。这是一个例子

或者，您可以使用

formControl

指令而不是

formControlName

来实现相同的结果，如下所示：

<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>

首先，您应该将

@Input

添加到

密码表单字段

@Component({
    selector: "password-form-field",
    templateUrl: "./password-form-field.component.html",
    styleUrls: ["./password-form-field.component.scss"]
})
export class PasswordFormFieldComponent {
    @Input() formCtrl: FormControl;

    constructor() {}
}

然后在密码表单字段.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> 

/**如果密码定义为独立的FormControl*/

或

/**如果密码是在名为myFormGroup的FormGroup中定义的*/

谢谢。我发现自己正是这样做的。。工作