Question

我正在使用Angular（带有Material）准备反应形式，如果该字段无效，我会给图标加颜色。

Master <- Master %>% mutate(RAM = pmax(RAM1, RAM2, RAM3, RAM4, RAM5, RAM6, RAM7, RAM8, RAM9, RAM10, RAM11, RAM12, RAM13, RAM14, RAM15, RAM16, RAM17, RAM18, RAM19, RAM20, RAM21, RAM22, RAM23, RAM24, RAM25, RAM26, RAM27, RAM28, RAM29, RAM30, RAM31, RAM32, RAM33, RAM34, RAM35, RAM36, RAM37, RAM38, RAM39, RAM40, RAM41, RAM42, RAM43, RAM44, RAM45, RAM46, RAM47, RAM48, RAM49, RAM50, RAM51, RAM52, RAM53, RAM54, RAM55, RAM56, RAM57, RAM58, RAM59, RAM60, RAM61, RAM62, RAM63, RAM64, RAM65, RAM66, RAM67, RAM68, RAM69, RAM70, RAM71, RAM72, RAM73, RAM74, RAM75, RAM76, RAM77, RAM78, RAM79, RAM80, RAM81, RAM82, RAM83, RAM84, RAM85, RAM86, RAM87, RAM88, RAM89, RAM90, RAM91, RAM92, na.rm =T))

component class

}）;

wholeForm = new FormGroup({ ... contact: new FormGroup({ ... city: new FormControl('', [Validators.required]) }), ...

component html template

我尝试在<form [formGroup]='wholeForm' (ngSubmit)='onSubmit()'> ... <div class="form-group" formGroupName="contact"> ... <div class='code-city'> <mat-form-field> <input formControlName="postalCode" matInput maxlength="5" placeholder="postal code*"> </mat-form-field> <mat-form-field> <input formControlName="city" matInput placeholder="city*"> <mat-icon matSuffix>location_on</mat-icon> </mat-form-field> </div> city中向mat-icon输入和[class.red-icon]='city.invalid'添加一些本地引用，但是没有用。接下来，我还尝试将类绑定到类中的属性，而没有结果。

当我硬编码为wholeForm.valid时，CSS类起作用。

CSS

.red-icon{
 color: red;
}

Answer 1

尝试

[class.red-icon]="wholeForm.controls.contact.controls['city'].invalid && wholeForm.controls.contact.controls['city'].touched"

Answer 2

使用此代码，

<div class='code-city'>
    <mat-form-field>
        <input formControlName="postalCode" matInput maxlength="5" placeholder="postal code*">
    </mat-form-field>
    <mat-form-field>
        <input formControlName="city" matInput placeholder="city*">
        <mat-icon matSuffix>location_on</mat-icon>
    </mat-form-field>
 </div>

和 style.css

.mat-form-field-invalid .mat-icon {
    color: red;
}

角度-反应形式-材质-无效时的颜色图标

2 个答案: