[英]Change validation color in Angular Material
我正在通過以下方式驗證我的表格:
this.form = this.fb.group({
UnitName: [this.editUnit.UnitName, Validators.required],
Area: [this.editUnit.Area, Validators.required],
OwnerId: [this.editUnit.OwnerId],
IsWithParking: [this.editUnit.IsWithParking],
ParkingArea: [this.editUnit.ParkingArea],
});
這是以html形式實現的
<mat-card style="margin-bottom: 10px;">
<mat-card-content>
<form [formGroup]="form">
<div class="col-md-12">
<mat-form-field>
<input type="text" matInput formControlName="UnitName" placeholder="Unit Name">
<mat-error *ngIf="UnitName.invalid" style="color: red;">{{unitNameError()}}</mat-error>
</mat-form-field>
<mat-form-field>
<input type="number" matInput formControlName="Area" placeholder="Unit Area">
<mat-error *ngIf="UnitName.invalid" style="color: red;">{{areaError()}}</mat-error>
</mat-form-field>
</div>
<div class="col-md-12">
<mat-form-field>
<mat-select placeholder="Unit Owner" formControlName="OwnerId">
<mat-option *ngFor="let p of persons" [value]="p.PersonId">
{{p.FirstName}} {{p.MiddleName}} {{p.LastName}}
</mat-option>
</mat-select>
<mat-error *ngIf="OwnerId.invalid" style="color: red;">{{ownerIdError()}}</mat-error>
</mat-form-field>
</div>
<div class="col-md-12">
<mat-form-field>
<mat-select formControlName="IsWithParking" placeholder="With Parking">
<mat-option *ngFor="let y of yesNo" [value]="y.value">
{{y.name}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="col-md-12">
<mat-form-field>
<input type="number" matInput placeholder="Parking Area Size" formControlName="ParkingArea">
</mat-form-field>
</div>
<button mat-raised-button class="btn btn-primary" (click)="updateUnit()" [disabled]="form.invalid">
Update Unit
</button>
<button mat-raised-button class="btn btn-warning" (click)="cancel()">
Cancel
</button>
</form>
</mat-card-content>
</mat-card>
如您在圖像中看到的,尚未執行任何操作,必填的輸入字段的行和字體為默認顏色,但是對於那些沒有必填屬性的輸入字段,其行顏色和字體為綠色。 並且,當我開始填寫必填字段時,行和字體的顏色也會變為綠色。 有沒有辦法改變這種綠色? 確實不符合我的紅色主題色。 非常感謝你。
由於您使用的是Angular Material渲染表單,因此您可能需要研究定義自定義Angular Material主題 (或在各個基礎上重新 定義 組件 )。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.