Keep radio bottom default value checked after form resets - Angular 6

Question

I have two material radio buttons that one of them set to default inside my Angular reactive Form. After the form submits (staying on the same page) I want to preform a reset to all of the form-control's and return the default selected radio button to checked mode.

So I created a radioBtnDefault prop inside my TS and set it to true, after the form resets I trying to set it to false and then back to true but i seems that the form reset function don't completes until the value is returned to true, because when I use setTimeOut with a small delay it works fine. Any suggestions how to use it without the setTimeOut function will be appreciated.

HTML

 <mat-radio-button class="inner-container__form__inputs__participants__buttons__btn" [checked]="radioBtnDefault" value="1"
                (click)="onClickedOneParticipant()">No
 </mat-radio-button>

TS

this.editMode = false;
    this.formSubmitted = false;
    this.colorSelectionOpen = false;
    this.radioBtnDefault = false;
    this.appointmentsCreationForm.reset();
    this.appointmentsCreationForm.get('participants').setValue('1');
    this.selectedBackgroundColor = '#EB5757';
    this.selectedTextColor = '#FFF';


    setTimeout(() => {
      this.radioBtnDefault = true;
    }, 100);

Answer 1

the reset function accepts a parameter of what value to reset the form to. If you don't provide it, it will revert to a null value.

this.appointmentsCreationForm.reset({'defaultProp': true});

or whatever value is appropriate in your case. If you're using reactive forms, I'd avoid using the [checked] property. The idea behind model driven forms is that the model should dictate the form state. Likewise, you probably don't want to be reacting to (click) but instead subscribing to the valueChanges observable offered by the form control.

Answer 2

You need to bind your [value] attribute of the radio button.

HTML

<form [formGroup]="formData">

    <mat-radio-group formControlName="IsActive">
    <mat-radio-button [value]="true">Active</mat-radio-button>
    &nbsp;&nbsp;&nbsp;&nbsp;
    <mat-radio-button [value]="false">Inactive</mat-radio-button>
    </mat-radio-group>

</form>

TS

 formData: FormGroup;
 active: boolean;

 constructor(private _formBuilder: FormBuilder) { }

 formDataFunction(value: boolean){
    this.formData = this._formBuilder.group({
         IsActive: [value]
    })
 }

 ngOnInit() {
     this.formDataFunction(true);
 }

 onSubmit() {
     console.log(this.formData.value);
     this.active = this.formData.controls['IsActive'].value;
     this.formData.reset(
         this.formDataFunction(true)
     );
 }

Demo Here