title: Angular - Async validator with valueChanges from another control
body: <p>I am trying to access the <code>valueChanges</code> of another field (B) in an asynchronous validator (of field A). But the validation is only triggered when the value of field A changes.
  If only the value of B changes, the status remains &quot;PENDING&quot; until the value of A is changed.</p>
  <p>What I want to do is create a validator that triggers when the given observables emits a value AND when the value of field B changes. I can imagine that the problem has something to do with the <code>valueChanges</code> observable not emitting any value, but how do I fix that?</p>
  <p>StackBlitz which recreates the problem: <a href="https://stackblitz.com/edit/angular-ivy-epoeen?devtoolsheight=33&amp;file=src/app/app.component.ts" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-ivy-epoeen?devtoolsheight=33&amp;file=src/app/app.component.ts</a></p>
  <p>Example component:</p>
  <pre class="lang-js prettyprint-override"><code>export class AppComponent {
    public form = new FormGroup({
      fieldA: new FormControl(null, { updateOn: 'blur' }),
      fieldB: new FormControl(null, { updateOn: 'blur' }),
    });
  
    constructor() {
      this.fieldBControl.setAsyncValidators(
        FieldBValidators.asyncValidateFieldBShouldNotBe(this.fieldA$)
      );
  
      this.fieldA$.subscribe((value) =&gt; console.log('fieldA changed to', value));
      this.fieldB$.subscribe((value) =&gt; console.log('fieldB changed to', value));
      this.fieldBStatus$.subscribe((status) =&gt; console.log('status changed to', status));
    }
  
    public get fieldAControl(): FormControl {
      return this.form.get('fieldA') as FormControl;
    }
  
    public get fieldA$(): Observable&lt;string&gt; {
      return this.fieldAControl.valueChanges;
    }
  
    public get fieldBControl(): FormControl {
      return this.form.get('fieldB') as FormControl;
    }
  
    public get fieldB$(): Observable&lt;string&gt; {
      return this.fieldBControl.valueChanges;
    }
  
    public get fieldBStatus$(): Observable&lt;string&gt; {
      return this.fieldBControl.statusChanges;
    }
  }
  </code></pre>
  <p>Validator:</p>
  <pre class="lang-js prettyprint-override"><code>export class FieldBValidators {
    public static asyncValidateFieldBShouldNotBe(
      value$: Observable&lt;string&gt;
    ): AsyncValidatorFn {
      return (control: AbstractControl): Observable&lt;ValidationErrors&gt; =&gt;
        value$.pipe(
          tap((value) =&gt; {
            console.log('fieldA', value);
            console.log('fieldB', control.value);
          }),
          take(1),
          map(
            (value): ValidationErrors =&gt; {
              if (value === control.value) {
                return { error: true };
              }
              return null;
            }
          )
        );
    }
  }
  </code></pre>
  <p>Console output is like this:</p>
  <pre><code>app.component.ts:24      fieldA changed to a
  fieldB.validators.ts:23  fieldA a
  fieldB.validators.ts:24  fieldB null
  app.component.ts:25      fieldB changed to a
  app.component.ts:27      status changed to PENDING
  app.component.ts:25      fieldB changed to b
  app.component.ts:27      status changed to PENDING
  app.component.ts:24      fieldA changed to b
  fieldB.validators.ts:23  fieldA b
  fieldB.validators.ts:24  fieldB b
  app.component.ts:27      status changed to INVALID
  </code></pre>
  <p>My attempt was to add a <code>startWith</code> pipe to the <code>value</code>, but then the Validator function always gets the initial value.</p>
  <p>Thank you very much for any input. Have a nice day!</p>