如何监听FormControls的ValueChanges并排除特定控件？

Hey there! Great question—dealing with form value changes while ignoring specific controls is super common, and you definitely don’t need to write individual subscriptions for every control. Here are two clean, scalable approaches to solve this:

Approach 1: Filter out changes from excluded controls #

If you only have a few controls to ignore, you can use pairwise to compare the previous and current form values, then check if any of the changed controls are outside your excluded list:

// Define the controls you want to ignore
const excludedControls = ['control3', 'control7']; 

this.form_group.valueChanges.pipe(
  // Get the current value and the immediately preceding value
  pairwise(),
  // Only proceed if a non-excluded control changed
  filter(([previousValue, currentValue]) => {
    // Find all controls that have changed values
    const changedControlKeys = Object.keys(currentValue).filter(
      key => currentValue[key] !== previousValue[key]
    );
    // Return true if at least one changed control isn't in the excluded list
    return changedControlKeys.some(key => !excludedControls.includes(key));
  })
).subscribe(([prev, curr]) => {
  // Run your calculation logic here
  console.log('Relevant form change detected—executing calculations!');
});

How this works: #

• pairwise() gives you access to both the old and new form values, so you can compare what changed.
• The filter() step checks if any of the modified controls are not in your exclusion list. If yes, the subscription triggers; if only excluded controls changed, it skips the logic.

Approach 2: Only track changes to included controls #

If you have more controls to exclude than to include, it’s cleaner to explicitly define which controls you care about, then filter the form values down to those:

// Define the controls you want to monitor
const includedControls = ['control1', 'control2', 'control4', 'control5', 'control6', 'control8', 'control9', 'control10'];

this.form_group.valueChanges.pipe(
  // Extract only the values of the controls we care about
  map(formValues => {
    return Object.fromEntries(
      Object.entries(formValues).filter(([key]) => includedControls.includes(key))
    );
  }),
  // Only trigger if the filtered values actually changed
  distinctUntilChanged((prev, curr) => JSON.stringify(prev) === JSON.stringify(curr))
).subscribe(filteredValues => {
  // Your calculation logic here—use filteredValues to access only the relevant controls
  console.log('Monitored controls changed:', filteredValues);
});

Notes for this approach: #

• JSON.stringify() works for simple values (strings, numbers, booleans), but if your controls hold complex objects, use a deep equality check (like Lodash’s isEqual or a custom deep compare function) instead to avoid false negatives.
• This approach reduces the data you’re working with, which can be helpful if your form has many controls you don’t need to track.

Both methods let you avoid the hassle of writing individual subscriptions for each control—pick whichever fits your list of excluded/included controls better!

内容的提问来源于stack exchange，提问作者Shift 'n Tab