angular material 2 - 如何更改 mat-form-fields 和 mat-form 自定义 CSS答案

【问题标题】：angular material 2 - how to change mat-form-fields and mat-form custom CSSangular material 2 - 如何更改 mat-form-fields 和 mat-form 自定义 CSS
【发布时间】：2018-12-05 23:05:20
【问题描述】：

我想要 mat-form-fields / mat-input 自定义 CSS

示例1) 棱角材料2

<mat-form-field >
            <input matInput
                   [(ngModel)]="affiliateForm.name"
                   required name="affiliate_name"
                   placeholder="test">
</mat-form-field>

结果：view.html

默认：无效：

自定义全局 CSS：global.css

.mat-input-infix.mat-form-field-infix{
                border: 2px solid blue;
}

结果：view.html 默认：我要无效：

          how to change custom invaild CSS Style?
          thank you have a good day.

【问题讨论】：

使用 css 更改材质输入的样式 => stackoverflow.com/a/54409733/2736742

标签： angular angular-material2

【解决方案1】：

像这样使用ng-invalid 和ng-invalid 类：

input.ng-valid {
    border: 2px solid green;
}
input.ng-invalid {
    border: 2px solid red;
}

只有在您使用 FormGroup 时，Angular 才会动态地为您添加这些额外的类。

//*.component.ts
constructor() {
    this.affiliateForm = new FormGroup({
        affiliateName: new FormControl('', Validators.required)
    })
}

还有这样的模板：

<!-- *.component.html -->
<form [formGroup]="affiliateForm">
    <mat-form-field >
        <input matInput
               formControlName="affiliateName"
               placeholder="test">
    </mat-form-field>
</form>

【讨论】：