如何在Angular Formly中根据输入框值动态修改描述文本颜色？

Got it, let's get that description text to change color once the input has content! Here are a few straightforward methods to make this work, depending on your preference:

Method 1: Pure CSS (No TS Changes Needed) #

This is the simplest approach if you're sticking with Formly's default input template. We'll use CSS sibling selectors to target the description text when the input has a value (i.e., the placeholder is hidden).

Add this to your component's CSS file:

/* Default color for empty input */
.formly-description {
  color: #6b7280; /* Replace with your original default color */
}

/* Update color when input has content */
.form-control:not(:placeholder-shown) + .formly-description {
  color: #22c55e; /* Replace with your desired active color */
}

Why this works: The :not(:placeholder-shown) pseudo-class targets the input only when it has content (since the placeholder disappears). The + sibling selector picks the immediately following description element, which uses Formly's default formly-description class.

Method 2: Dynamic Style via Formly Hooks & Custom Template #

If you need more control (like conditional logic beyond just "has value"), use Formly's hooks to update a dynamic style property, then apply it in a custom input template.

Step 1: Update Your TS Component #

Modify your fields array to include hooks that check for input value changes and set a style object:

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

@Component({
  selector: 'formly-app-example',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  @ViewChild('inputField') inputField!: TemplateRef<any>;
  form = new FormGroup({});
  model: any = {};
  options: FormlyFormOptions = {};
  fields: FormlyFieldConfig[] = [
    {
      key: 'Input',
      type: 'input',
      templateOptions: {
        label: 'Input',
        placeholder: 'Placeholder',
        description: 'Description',
        required: true,
        descriptionStyle: {} // Initialize empty style object
      },
      hooks: {
        // Trigger whenever the input value changes
        onModelChange: (field) => {
          const hasValue = !!field.model[field.key];
          field.templateOptions.descriptionStyle = hasValue 
            ? { color: '#3b82f6', fontWeight: '500' } // Your desired active styles
            : { color: '#6b7280' }; // Default style
        },
        // Check initial value if model is pre-filled
        onInit: (field) => {
          const hasValue = !!field.model[field.key];
          field.templateOptions.descriptionStyle = hasValue 
            ? { color: '#3b82f6', fontWeight: '500' } 
            : { color: '#6b7280' };
        }
      },
    },
  ];

  ngOnInit() {
    // Register the custom input template
    this.options.templates = {
      input: this.inputField,
    };
  }
}

Step 2: Add the Custom Template to Your HTML #

Update your component's HTML to use the custom template that applies the dynamic descriptionStyle:

<form [formGroup]="form">
  <formly-form 
    [model]="model" 
    [fields]="fields" 
    [options]="options" 
    [form]="form">
    <!-- Custom input template with dynamic description styling -->
    <ng-template #inputField let-field="field" let-to="to">
      <label [for]="field.id" class="form-label">{{ to.label }}</label>
      <input
        [type]="to.type || 'text'"
        [formControl]="field.formControl"
        [formlyAttributes]="field"
        [id]="field.id"
        class="form-control"
      />
      <p *ngIf="to.description" 
         [ngStyle]="to.descriptionStyle" 
         class="form-text formly-description">
        {{ to.description }}
      </p>
    </ng-template>
  </formly-form>
</form>

Method 3: Using fieldChanges Observable #

If you prefer handling multiple field updates in one place, use Formly's fieldChanges observable to listen for value changes.

Add this to your component's ngOnInit (along with the custom template from Method 2):

ngOnInit() {
  this.options.templates = {
    input: this.inputField,
  };

  // Listen for changes to the input field
  this.options.fieldChanges.subscribe((change) => {
    if (change.field.key === 'Input') {
      const hasValue = !!change.value;
      change.field.templateOptions.descriptionStyle = hasValue
        ? { color: '#f59e0b' } // Your active color
        : { color: '#6b7280' }; // Default color
    }
  });
}

All these methods will let you update the description text's color once the input has content. Pick the one that fits your use case best!

内容的提问来源于stack exchange，提问作者Satyam Singh