英文:
Form Invalid Input Conditional Coloring Angular/Materialize
问题
我正在使用Angular中的响应式表单，尝试在输入字段被触摸、失去焦点并且为空时更改输入字段的颜色。我查看了material.angular.io的文档并实施了它，但颜色仍然没有像文档中那样改变。我可以看到<mat-error>元素，但颜色没有改变。有没有一种非 hacky 的方法来改变颜色？
文档来源:
https://material.angular.io/components/form-field/overview#form-field-error
组件（.html）
<form [formGroup]="reactiveForm" (ngSubmit)="submit()"><mat-form-field ><input matInput [formControl]="firstName" type="text"><mat-error>Error</mat-error></mat-form-field></form>
组件（.ts）
export class PersonFormComponent {firstName = new FormControl(null, Validators.required)reactiveForm: FormGroup = new FormGroup({firstName: this.firstName});}
我已在app.module.ts的@NgModule的导入中声明了MatInputModule:
import { MatInputModule } from '@angular/material/input';
我尝试过的事情:
在输入中添加required关键字:
<input matInput [formControl]="firstName" type="text" required>
英文:
I'm using Reactive Forms in Angular and I'm trying to change the color of the input field if the input is touched and unfocused and left empty.
I was looking through the documentation of material.angular.io and implemented it but it still doesn't change the color like in the documentation?
I can see the < mat-error> element but the color does not change. Is there a non-hacky way of doing the colors?
Documentation source:
https://material.angular.io/components/form-field/overview#form-field-error
Component (.html)
<form [formGroup]="reactiveForm" (ngSubmit)="submit()"><mat-form-field ><input matInput [formControl]="firstName" type="text"><mat-error>Error</mat-error></mat-form-field></form>
Component (.ts)
export class PersonFormComponent {firstName = new FormControl(null, Validators.required)reactiveForm: FormGroup = new FormGroup({firstName: this.firstName});}
I have declared MatInputModule in the imports of @NgModule in app.module.ts:
import { MatInputModule } from '@angular/material/input';
What I have tried:
Adding required keyword to the input:
<input matInput [formControl]="firstName" type="text" required >
答案1
得分: 0
I would have tried to use custom classes according to the status of touched and focus to change the color by custom ones:
<form [formGroup]="reactiveForm" (ngSubmit)="submit()"><mat-form-field ><input matInput [formControl]="firstName" type="text"[class.ng-touched]="firstName.touched && !firstName.focus"[class.ng-untouched]="!firstName.touched"><mat-error>Error</mat-error></mat-form-field></form>
(Note: The code part has been left unchanged as per your request.)
英文:
I would have tried to use custom classes according to the status of touched and focus to change the color by custom ones:
<form [formGroup]="reactiveForm" (ngSubmit)="submit()"><mat-form-field ><input matInput [formControl]="firstName" type="text"[class.ng-touched]="firstName.touched && !firstName.focus"[class.ng-untouched]="!firstName.touched"><mat-error>Error</mat-error></mat-form-field></form>
答案2
得分: 0
你的输入标签缺少必需的属性。
<mat-form-field><input matInput [formControl]="firstName" type="text" required><mat-error>Error</mat-error></mat-form-field>
英文:
You are missing the required attribute on the input tag.
<mat-form-field><input matInput [formControl]="firstName" type="text" required><mat-error>Error</mat-error></mat-form-field>
答案3
得分: 0
I changed the .ts to:
reactiveForm: FormGroup = this.formBuilder.group({
firstName: ["", Validators.required]
});
isFirstNameValid() {
if (this.reactiveForm.get("firstName")?.touched && this.reactiveForm.get("firstName")?.valid == false) {
return false;
}
return true;
}
Changed the .html to:
<input formControlName="firstName" matInput type="text" [ngClass]="{'ng-invalid': isFirstNameValid()}">
Now it works as expected.
英文:
I changed the .ts to:
reactiveForm: FormGroup = this.formBuilder.group({firstName : ["", Validators.required]});isFirstNameValid(){if(this.reactiveForm.get("firstName")?.touched && this.reactiveForm.get("firstName")?.valid == false){return false;}return true;}
Changed the .html to:
<input formControlName="firstName" matInput type="text" [ngClass]="{'ng-invalid' : isFirstNameValid()}">
Now it works as expected.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论