Angular 动态形式和 Angular 材质答案

【问题标题】：Angular Dynamic Forms and Angular MaterialAngular 动态形式和 Angular 材质
【发布时间】：2018-07-18 19:02:17
【问题描述】：

我在 Angular 5 中构建了一个动态表单组件（基于来自https://angular.io/guide/dynamic-form 的文档和示例）。

在我尝试使用有角材料之前，一切正常。

我在这里阅读了许多关于类似问题的文章，但它们似乎都是因为人们没有导入正确的模块或使用 mdInput 或 mat-Input 而不是 matInput。我遇到的问题不是这种情况。

任何想法或建议将不胜感激。

更改的代码 - 因错误而中断 -

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

动态表单控件组件模板

我对下面的工作代码所做的唯一更改是包装输入字段并将 matInput 属性添加到输入字段。

我正在通过核心模块导入所有材质模块（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>

当前代码 - 这很好用，但我没有得到角度材料格式

选择器

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

【问题讨论】：

我认为你的必须被包围
感谢您的快速响应，但我最初将其放入并取出，因为我试图排除其中任何一个是否有错误。放回去仍然给我同样的错误
我也遇到了同样的问题，你找到解决办法了吗？

标签： angular angular-material dynamic-forms

【解决方案1】：

我相信你已经解决了这个问题。 mat-form-field 的错误必须包含一个 MatFormFieldControl。表示使用的材料成分不是进口的。即使用 mat-button 指令时需要导入 MatButtonModule。

【讨论】：

【解决方案2】：

我能够同时使用 Angular Dynamic Forms 和 Material。查看工作 stackblitz 示例 here 显示动态表单和材料的使用。

【讨论】：