角度材质插入垫提示自定义表单控件

Question

我有这个自定义

FormControl

，它包含复杂的逻辑并使用

mat-form-field

。

export class ComplexFormControlComponent implements ControlValueAccessor{

    private formControl = new FormControl();

    writeValue(){}
    // Other methods.
}

<mat-form-field>
   <mat-label>Complex value</mat-label>
   <input matInput placeholder="complex value" [formControl]="formControl">
</mat-form-field>

我在我的一个表单中使用这个组件。

<form [form]="form">
    <mat-form-field>
       <mat-label>Simplevalue</mat-label>
       <input matInput placeholder="simple value" formControlName="simple">
    </mat-form-field>
    <complex-form-control-component formControlName="complex"></complex-form-control-component>
</form>

现在例如当

form.simple.value === ''

时我想在

ComplexFormControlComponent

中显示提示。我可以简单地将消息传递给

ComplexFormControlComponent

，但我宁愿将

mat-hint

直接传递给它。

类似这样的：

<complex-form-control-component formControlName="complex">
    <mat-hint *ngIf="form.simple.value === ''">Please enter simple value first</mat-hint>
</complex-form-control-component>

我该怎么做？

我尝试过：

<complex-form-control-component formControlName="complex">
    <ng-template><mat-hint>Hint1</mat-hint><ng-template>
    <ng-template><mat-hint>Hint2</mat-hint><ng-template>
</complex-form-control-component>

在复杂的组件中

@ContentChildren(TemplateRef) hints: QueryList<TemplateRef<MatHint>>

<mat-form-field>
   <mat-label>Complex value</mat-label>
   <input matInput placeholder="complex value" [formControl]="formControl">
   <mat-hint>Test</mat-hint>
   <ng-template *ngFor"let hint of hints" [ngTemplateOutlet]="hint"></ng-template>
</mat-form-field>

这只是将提示放在

HTML

中，但

mat-form-field

不与其交互：

Answer 1

你很接近。

要嵌入依赖于父组件中逻辑的内容，您应该将所有这些内容包装到一个

ng-template

中。

此外，您没有在子组件中正确投影它 (

ComplexFormControlComponent

)。您应该使用

ng-container

并在其上放置

[ngTemplateOutlet]

指令并传入模板引用。

请参阅以下示例。

// form.html
<form [formGroup]="form">
    <mat-form-field appearance="fill">
        <mat-label>Simplevalue</mat-label>
        <input matInput placeholder="simple value" formControlName="simple">
    </mat-form-field>

    <complex-form-control>
    <!--  I would wrap all content in one ng-template. -->
        <ng-template>
            <mat-hint *ngIf="form.get('simple').value === ''">
                Hint1
            </mat-hint>
            <mat-hint *ngIf="form.get('simple').value !== ''">
                Hint2
            </mat-hint>
        </ng-template>
    </complex-form-control>
</form>

// complex form component
@Component({
  selector: 'complex-form-control',
  template: `
    <mat-form-field>
      <mat-label>Complex value</mat-label>
      <input matInput placeholder="complex value" [formControl]="complex">
      <!--  Here is how you output ng-template content -->
      <ng-container [ngTemplateOutlet]="template"></ng-container>
    </mat-form-field>
  `,
})
export class ComplexFormControlComponent {
  complex = new FormControl();

  @ContentChild(TemplateRef) template: TemplateRef<any>;
}

Answer 2

您可以使用内容投影添加提示。 在您的组件模板中添加

mat-hint

，如下所示

<mat-form-field>
   <mat-label>Complex value</mat-label>
   <input matInput placeholder="complex value" [formControl]="formControl">
   <mat-hint>
       <ng-content select="[hint]"></ng-content>
   </mat-hint>
</mat-form-field>

现在，当使用组件时，您可以像这样简单地传递提示（注意属性“hint”，它将通过

select="[hint]"

映射到 ng-content）

<complex-form-control-component formControlName="complex">
    <ng-container *ngIf="condition" hint> hint </ng-container>
</complex-form-control-component>

Answer 3

在自定义组件中，您可以添加

mat-hint

并使用

@Input

从使用位置进行设置。

// This is how your component would be. 
<mat-form-field class="example-full-width">
  <mat-label>{{ label }}</mat-label>
  <input matInput
    [name]="formControlName"
    [formControlName]="formControlName"
    [placeholder]="placeholder" 
    [value]="value"
  >
    <mat-hint *ngIf="hint"> {{ hint }} </mat-hint>
    <ng-content></ng-content>
</mat-form-field>

在您的 component.ts 文件中，您可以添加以下内容：

@Input() placeholder: string;
@Input() formControlName: string;
@Input() hint: string;

您想在哪里使用它：

<custom-input 
   [formControlName]="someName" 
   [hint]="'Some hint'"
   [placeholder]="'Some valid placeholder'"
>
</custom-input>