Question

我正在通过以下方式验证我的表单：

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>

，这是初始加载时的结果：

您可以在图像中看到，但尚未执行任何操作，必填的输入字段的行和字体为默认颜色，但是对于那些没有必填属性的输入字段，其行颜色和字体为绿色。并且，当我开始填写必填字段时，行和字体的颜色也会变为绿色。有没有办法改变这种绿色？确实不符合我的红色主题色。非常感谢。

Answer 1

由于您正在使用Angular Material来呈现表单，因此您可能需要研究defining a custom Angular Material theme（或re-theming components on an individual basis）。

更改角度材料中的验证颜色

1 个答案: