Angular动态表单和Angular Material

Question

我已经在Angular 5中构建了一个动态表单组件（基于https://angular.io/guide/dynamic-form的文档和示例）。一切都很好，直到我尝试使用angular material。我阅读了这里的许多类似问题的文章，但它们似乎都是因为人们没有导入正确的模块或者使用了mdInput或mat-Input而不是matInput。但这不是我所遇到的问题。如果您有任何想法或建议，将不胜感激。

更改后的代码出现错误：

*mat-form-field必须包含MatFormFieldControl。*

动态表单控件模板：

我对下面的可用代码唯一的更改是将输入字段包装在中，并在输入字段中添加了matInput属性。我通过核心模块导入了所有Material模块（如MatFormFieldModule和MatInputModule等）。应用程序中的所有其他组件中的所有材料输入和表单字段都有效，因此我认为问题不是缺少任何导入。

<div [formGroup]="form">

    <div [ngSwitch]="control.controlType">
        <mat-form-field>
            <input matInput placeholder="{{control.label}}" *ngSwitchCase="'textbox'" [formControlName]="control.key" [id]="control.key"
                [type]="control.type">
        </mat-form-field>
        <select [id]="control.label" *ngSwitchCase="'dropdown'" [formControlName]="control.key">
            <option value="">Select {{control.label}}</option>
            <option *ngFor="let opt of control.options" [value]="opt.key">{{opt.value}}</option>
        </select>
    </div>

    <div class="errorMessage" *ngIf="!isValid">{{control.label}} is required</div>
</div>

当前代码 - 这个代码完美运行，但我没有得到Angular Material格式

选择器

<mi-dynamic-form [controls]="controls"></mi-dynamic-form>

动态表单组件

    import { Component, Input } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

import { DynamicFormBase } from './dynamic-form-base';

@Component({
    selector: 'mi-control',
    templateUrl: './dynamic-form-control.component.html'
})
export class DynamicFormControlComponent {

    // API
    @Input() control: DynamicFormBase<any>;
    @Input() form: FormGroup;

    get isValid() { return this.form.controls[this.control.key].valid; }
}

动态表单组件模板

    <div [formGroup]="form">
    <div [ngSwitch]="control.controlType">
            <input  placeholder="{{control.label}}" *ngSwitchCase="'textbox'" [formControlName]="control.key" [id]="control.key"
                [type]="control.type">
        <select [id]="control.label" *ngSwitchCase="'dropdown'" [formControlName]="control.key">
            <option value="">Select {{control.label}}</option>
            <option *ngFor="let opt of control.options" [value]="opt.key">{{opt.value}}</option>
        </select>
    </div>

    <div class="errorMessage" *ngIf="!isValid">{{control.label}} is required</div>
</div>

动态表单控件组件

import { Component, Input } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

import { DynamicFormBase } from './dynamic-form-base';

@Component({
    selector: 'mi-control',
    templateUrl: './dynamic-form-control.component.html'
})
export class DynamicFormControlComponent {

    // API
    @Input() control: DynamicFormBase<any>;
    @Input() form: FormGroup;

    get isValid() { return this.form.controls[this.control.key].valid; }
}

动态表单控件组件模板

 <div [formGroup]="form">
        <!-- <label [attr.for]="control.key">{{control.label}}</label> -->

        <div [ngSwitch]="control.controlType">
            <mat-form-field>
                <input matInput placeholder="{{control.label}}" *ngSwitchCase="'textbox'" [formControlName]="key" [id]="control.key"
                    [type]="control.type">
            </mat-form-field>
            <mat-select [id]="control.label" *ngSwitchCase="'dropdown'" [formControlName]="control.key">
                <mat-option value="">Select {{control.label}}</mat-option>
                <mat-option *ngFor="let opt of control.options" [value]="opt.key">{{opt.value}}</mat-option>
            </mat-select>
        </div>

        <div class="errorMessage" *ngIf="!isValid">{{control.label}} is required</div>
    </div>

- ccocker

---

我认为你的<mat-select>必须被<mat-form-field>包围。 - A.Baudouin

谢谢您的快速回复，但我最初就有这个，并将其删除，因为我试图排除它们中的任何一个是否出错。将其放回仍然会给我相同的错误。 - ccocker

我遇到了同样的问题，你找到解决方案了吗？ - Scott

Answer 1

我已能够在 Angular 动态表单 和 Material 上实现此操作。查看stackblitz示例，此处演示了动态表单和 Material 的使用。

- Scott

---

这对于我现在所做的事情来说真的非常棒。 - Faliorn

Answer 2

我相信你已经解决了这个问题。mat-form-field的错误必须包含MatFormFieldControl，这意味着使用的材料组件没有被导入。例如，当使用mat-button指令时，需要导入MatButtonModule。

- user2722465