使用角度反应窗体动态更改窗体字段的颜色

Question

<form name="form" [formGroup]="form">
          <div class="form-group">
            <label for="firstName">First Name</label>
            <input type="text"  class="form-control" formControlName="firstName" [style.color]="getColor('firstName')" (input)="inputChanged($event)"/>
          </div>

          <div class="form-group">
            <label for="email">Email</label>
            <input type="text" class="form-control" formControlName="email" [style.color]="getColor('email')" (input)="inputChanged($event)" />
          </div>
          <div class="form-group">
            <label for="phone">phone</label>
            <input type="text" class="form-control" formControlName="phone" [style.color]="getColor('phone')" (input)="inputChanged($event)" />
          </div>

          <button class="btn btn-primary" (click)="setFormm()">click here</button>
        </form>

@Component({
  selector: "app-formreactive",
  templateUrl: "./formreactive.component.html",
  styleUrls: ["./formreactive.component.css"]
})
export class FormreactiveComponent {
  form = new FormGroup({
    firstName: new FormControl(""),
    email: new FormControl("")
  });

  getColor(frmctrl, color) {

  }

  inputChanged = (e: any) => {

  };

  setFormm = () => {
    this.form.controls['firstName'].setValue('vishnu');
    this.form.controls["email"].setValue("[e-mail]");
  };

Answer 1

你可以让它“玩”ng-pristine和ng-dirty。看文件。所以，在您的。css中

input.ng-pristine
{
  color:red;
}
input.ng-dirty
{
  color:green
}

在函数setForm中将所有控件标记为Pristine

setForm = () => {
    ....
    this.form.markAsPristine({ onlySelf:false }) 
  };

注意：如果输入为空，可以给出黑色光标

<input type="text"  class="form-control" formControlName="firstName" 
        [style.color]="!form.value.firstName?'black':null" />

 //and 
 <input type="text" class="form-control" formControlName="email" 
        [style.color]="!form.value.email?'black':null" />

我们的.css变成

input.ng-pristine.advice
{
  color:red;
}
input.ng-dirty.advice
{
  color:green
}

我们的输入像

<input type="text"  class="form-control advice" formControlName="firstName" 
                [style.color]="!form.value.firstName?'black':null" />
<input type="text" class="form-control advice" formControlName="email" 
               [style.color]="!form.value.email?'black':null" />

我更新了stackblitz