角度可重复使用的垫子表单字段

Question

在我的 Angular 应用程序中，我有很多带有文本输入的反应式表单，它们都需要错误消息，这是很多重复的代码。 我想为垫子表单字段创建一个自定义组件，但我正在努力使其工作。 这是我的模板：

<mat-form-field fxLayout="column" fxLayoutAlign="start stretch">
  <mat-label>{{label}}</mat-label>
  <input matInput type="{{inputType}}" autocomplete="username" [formControl]="formControl">
  <mat-error *ngIf="formControl.touched && formControl.errors?.required">
    Bitte geben Sie den {{label}} an!
  </mat-error>
  <mat-error *ngIf="formControl.touched && formControl.errors?.maxlength">
    Der {{label}} darf nicht mehr als {{maxLength}} Zeichen haben!
  </mat-error>
  <mat-error *ngIf="formControl.touched && formControl.errors?.minlength">
    Der {{label}} darf nicht weniger als {{minLength}} Zeichen haben!
  </mat-error>
</mat-form-field>
<ng-container *ngIf="formControl.touched && formControl.invalid">
  <br/>
</ng-container>

组件：

export class FormFieldComponent {

  @Input() formControl: FormControl;

  @Input() inputType: "color" | "date" | "datetime-local" |
"email" | "month" | "number" | "password" | "search" |
"tel" | "text" | "time" | "url" | "week" = "text"

  @Input() appearance: 'legacy' | 'fill' | 'standard' | 'outline' = 'standard';

  @Input() label: string;

  @Input() minLength: number;

  @Input() maxLength: number;
}

在我的表单中，我想这样调用组件：

<mat-card class="login">
    <form [formGroup]="form" (ngSubmit)="login()">
      <mat-card-title style="text-align: center">Login</mat-card-title>
      <mat-card-content fxLayout="column" fxLayoutAlign="start stretch">
        <app-form-field [formControl]="form.controls.userName" [maxLength]="userNameMaxLength" [minLength]="userNameMinLength" [label]="'Benutzername'"></app-form-field>
        <app-form-field [formControl]="form.controls.password" [maxLength]="passwordMaxLength" [minLength]="passwordMinLength" [label]="'Passwort'" [inputType]="'password'"></app-form-field>
        <ng-container *ngIf="loginFailed && formWasSubmitted">
          <br>
          <mat-error>
            Authentifizierung fehlgeschlagen.
            Bitte überprüfen Sie ihren
            Benutzernamen und ihr Password.
          </mat-error>
          <br>
        </ng-container>
        <div fxLayout="column" fxLayoutAlign="start center">
          <button type="submit" mat-raised-button color="primary">Login</button>
        </div>
      </mat-card-content>
    </form>
  </mat-card>

问题是在控制台中我收到以下错误：

core.mjs:6485 ERROR Error: No value accessor for form control with unspecified name attribute
at _throwError (forms.mjs:1785:11)
at setUpControl (forms.mjs:1576:13)
at FormControlDirective.ngOnChanges (forms.mjs:5126:13)
at FormControlDirective.rememberChangeHistoryAndInvokeOnChangesHook

Answer 1

是输入的“名字”有问题

formControl

，你可以用一些类似的

@Input('control') formControl: FormControl;

并使用

<app-form-field [control]="control"..>

顺便说一句：如果在 mat-error 中触摸，则没有必要检查（通过缺陷，mat-error 仅显示 formControl 是否被触摸），例如够了

<mat-error formControl.errors?.minlength">
    Der {{label}} darf nicht weniger als {{minLength}} Zeichen haben!
</mat-error>

Answer 2

搜索实现 ControlValueAccessor。