Get current value of an Angular 17 FormBuilder field not reflecting actual value

Question

I'm building a string of text in my template from multiple sources. Each of the fields fires it's own change event successfully, but I'm trying to get the value of the constraint field from within the change event of the identifier field and it's not working. When the change event fires on the identifier field, it calls updateIdentifier in the ts file. But for some reason it's not able to get the current value of the constraint field.

@Component({
  selector: 'app-request-user-group',
  templateUrl: './request-user-group.component.html',
  styleUrls: ['./request-user-group.component.scss']
})
export class RequestUserGroupComponent implements OnInit {
  requestUserGroupForm: FormGroup;

  constructor(
    private formBuilder: FormBuilder,
  ) { }

  ngOnInit() {
      // The route is /request-user-group
      this.requestUserGroupForm = this.formBuilder.group({
        identifier: ['Identifier'],
        memberConstraint: ['None'],
      }, {});
    }
  }

  updateIdentifierText($event) {
    debugger;
    this.identifier.next($event.target.value);
  }
}

and the relevant bits from the template

<form [formGroup]="requestUserGroupForm" (ngSubmit)="submitUserGroupRequest_click()">
  <div class="data-field">
    <h2>Identifier</h2>
    <input type="text" (change)="updateIdentifierText($event)" formControlName="identifier">
  </div>
  <div class="data-field">
    <div class="member-constraint-radio">
      <input type="radio" formControlName="memberConstraint" name="memberConstraint" id="member-constraint-None" value="None">
      <label for="member-constraint-None">None</label>
    </div>
    <div class="member-constraint-radio">
      <input type="radio" formControlName="memberConstraint" name="memberConstraint" id="member-constraint-2FA" value="2FA">
      <label for="member-constraint-2FA">2FA</label>
    </div>
  </div>
</form>

If I select the 2FA radio button, then change the identifier to "foo". When the debugger fires in the updateIdentifierText I can output the following two lines and get different values. Why is this, and how can I ensure I'm getting the currently selected value?

this.requestUserGroupForm.get('memberConstraint').value
// prints None
this.requestUserGroupForm.get('memberConstraint')._pendingValue
// prints 2FA
this.requestUserGroupForm.value.memberConstraint
// prints None

Update: After reading the suggestion from @Thomas Cayne I decided to fire a change event on the radio buttons which updates a value in the component (just like the identifier event). Then I'm listening to both of those values to update the string of text.

Answer 1

You can use (input) instead of (change). (input) event fires everytime you enter a character. (change) when you lose focus on the input. Or you can do the following:

Use ChangeDetectorRef to detect the changes in your component:

constructor(
  private formBuilder: FormBuilder,
  private cdRef: ChangeDetectorRef
) {}

updateIdentifierText($event) {
   debugger;
   this.identifier.next($event.target.value);
   this.cdRef.detectChanges(); // Trigger change detection

   // Will now reflect the updated value
   console.log(this.requestUserGroupForm.value.memberConstraint);
}

Also, I don't see where you are using submitUserGroupRequest_click().