I have a FormGroup
, let's call it groupForm
, that contains a control which is a group of radio buttons:
this.groupForm = this.formBuilder.group({
radioGroup: ['', Validators.required]
});
I have a BehaviorSubject
in a service, which I'd like to use to set the default value of that group. I'd like to use an async
pipe to do it. So in my template I do something like this:
<mat-radio-group formControlName='radioGroup' [value]="selection$ | async">
... radio buttons here ...
</mat-radio-group>
Then, in the same template I am using the validity of the groupForm to enable a button.
The problem is, although in the UI the correct radio button appears selected, the form is still invalid and the button appears disabled. I tried the following workaround in code:
this.selection$ = this.selection$.pipe(
tap(value => this.groupForm.get('radioGroup').setValue(value);
)
and it worked. But I am wondering if I am missing something and I can avoid using this workaround.
Thank you in advance.