使用Angular反应形式动态改变形式字段的颜色

Question

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

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

我在以下链接中创建了堆栈闪电战

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

@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("[email protected]");
  };

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

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

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

我更新了堆叠闪电战