首页 文章

角动态形式和角度材料

提问于
浏览
2

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

一切都有效,直到我尝试使用棱角分明的材料 .

我在这里读过类似问题的一些文章,但它们似乎都是因为人们没有导入正确的模块或使用mdInput或mat-Input而不是matInput . 对于我遇到的问题,情况并非如此 .

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

CHANGED CODE - BREAKS with ERROR -

  • mat-form-field必须包含MatFormFieldControl . ***

Dynamic Form Control Component Template

我对下面的工作代码所做的唯一更改是将输入字段包装起来并将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>

CURRENT CODE - This works perfectly but I am not getting the angular material formatting

Selector

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

Dynamic Form Component

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

Dynamic Form Component Template

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

Dynamic Form Control Component

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

Dynamic Form Control Component Template

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

1 回答

  • 0

    我相信你已经解决了这个问题 . mat-form-field的错误必须包含MatFormFieldControl . 表示未导入使用的材料组件 . 即使用mat-button指令时需要导入MatButtonModule .

相关问题