angularjs - 如何更改 Angular Formly 描述的颜色？

Question

我正在使用角度形式。

下面是输入字段的图像及其描述。

我面临什么问题？
最初描述属性有一些默认颜色，但是一旦输入字段有一些值，我想更改描述属性的颜色，但我没有得到任何解决方案，直到没有相同的值。

HTML

<form [formGroup]="form">
  <formly-form [model]="model" [fields]="fields" [options]="options" [form]="form"></formly-form>
</form>

TS

import { Component } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { FormlyFormOptions, FormlyFieldConfig } from '@ngx-formly/core';

@Component({
  selector: 'formly-app-example',
  templateUrl: './app.component.html',
})
export class AppComponent {
  form = new FormGroup({});
  model: any = {};
  options: FormlyFormOptions = {};
  fields: FormlyFieldConfig[] = [
    {
      key: 'Input',
      type: 'input',
      templateOptions: {
        label: 'Input',
        placeholder: 'Placeholder',
        description: 'Description',
        required: true,
      },
    },
  ];
}

标签： angularjsangularangular-formlyngx-formly

Answer 1

你可以试试这个

HTML

<!-- NOTE ngClass > https://angular.io/api/common/NgClass -->
<form [formGroup]="form">
  <formly-form [ngClass]="{ 'value-change': isChange }" [model]="model" [fields]="fields" [options]="options" [form]="form"></formly-form>
</form>

TS

import { Component } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { FormlyFormOptions, FormlyFieldConfig } from '@ngx-formly/core';

@Component({
  selector: 'formly-app-example',
  templateUrl: './app.component.html',
})
export class AppComponent {
  // NOTE change boolean
  isChange: boolean = false;
  form = new FormGroup({});
  model: any = {};
  options: FormlyFormOptions = {};
  fields: FormlyFieldConfig[] = [
    {
      key: 'Input',
      type: 'input',
      templateOptions: {
        label: 'Input',
        placeholder: 'Placeholder',
        description: 'Description',
        required: true,
        // NOTE change > https://github.com/ngx-formly/ngx-formly/issues/1225
        change: (field, $event) => {
          // NOTE you can add test here if you want specific change in your $event
          this.isChange = true;
        }
      },
    },
  ];
}

CSS

formly-form.value-change {
    ::ng-deep {
        your-description-label {
            color: orange;
        }
    }
}