使用 Angular 响应式表单动态更改表单字段的颜色

Question

当用户使用 setValue() 为这些字段动态设置表单值时，如何仅将少数字段（名字和电子邮件）的 Angular 反应式表单字段文本颜色更改为“红色”。还需要将表单字段（名字和电子邮件）的颜色更改为“绿色”，以防用户尝试修改/交互。

但不应更改其他表单字段的颜色。

我在以下链接中创建了 stackblitz

reactive form updated code in stackblitz

我已经创建了这样的表单，

<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("vishnu@hminds.com");
  };

Answer 1

您可以使用 ng-pristine 和 ng-dirty 来“玩”它。见the docs。所以，在你的 .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" />

见stackblitz

更新如果我们希望这仅发生在某些输入中，我们可以向输入添加一个类（例如，称为“advice”）class="form-control advice"

我们的 .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" />

我更新了堆栈闪电战