Могу ли я передать mat-form-field как пользовательский компонент или директиву?

Question

У меня есть это поле формы:

    <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 в родительском компоненте. Возможно ли что-то подобное?

Причина этого в том, что я хотел бы использовать это во многих других компонентах ..

Answer 1

Вы должны реализовать ControlValueAccessor в вашем password-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> 

OR

/** if password is defined in a FormGroup named myFormGroup  */
<password-form-field [formCtrl]="myFormGroup.get('password')"></password-form-field>