获取 Angular 17 FormBuilder 字段的当前值不反映实际值

Question

我正在模板中从多个来源构建一串文本。每个字段都成功触发其自己的更改事件，但我试图从

constraint

字段的更改事件中获取

identifier

字段的值，但它不起作用。当更改事件在

identifier

字段上触发时，它会调用

updateIdentifier

文件中的

ts

。但由于某种原因，它无法获取

constraint

字段的当前值。

@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);
  }
}

以及模板中的相关位

<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>

如果我选择 2FA 单选按钮，则将标识符更改为“foo”。当调试器在

updateIdentifierText

中触发时，我可以输出以下两行并获得不同的值。为什么会这样？如何确保获得当前选择的值？

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

Answer 1

使用

ChangeDetectorRef

检测组件中的更改：

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);
}