Validation Condition In Angular - html

Question

Hello I'm trying to submit data as per type. There 2 types 1.Answer 2.Sub Flow. But my save button not enabled when I'm selecting sub flow. Please help me What I'm missing there.
BELOW IS THE HTML FILE CODE
<div class="row">
<div class="box">
<app-question-error *ngIf="isError" [errorData]='errorData'></app-question-error>
<form *ngIf="!isError" [formGroup]="questionForm" (ngSubmit)="SubmitForm()">
<div class="col-12 col-md-8 col-sm-12">
<div>
<div class="form-group row">
<label for="colFormLabel" class="col-sm-3 col-form-label">Type </label>
<div class="col-sm-4 d-flex justify-content-between">
<select formControlName="subflow" class="form-control" (change)="onDropDownChange($event)">
<option>Answer</option>
<option>Subflow</option>
</select>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-12 col-sm-12">
<div class="form-group row">
<div class="col-sm-2">
</div>
<div class="col-sm-10">
<div *ngIf="subflowSelection == 'Subflow'">
<ul class="list-group">
<ng-select [items]="flowNames" bindLabel="flowName" appendTo="body" multiple="true"
formControlName="subflow">
</ng-select>
</ul>
</div>
</div>
</div>
</div>
<ng-container *ngIf="subflowSelection === 'Answer'">
<div class="col-12 col-md-8 col-sm-12" formArrayName="answers">
<div *ngFor="let quantity of getAnswers().controls; let i=index" [formGroupName]="i">
<div class="form-group row">
<label for="colFormLabel" class="col-sm-3 col-form-label">{{mylabels.answer}} </label>
<div class="col-sm-9 d-flex justify-content-between">
<input type="text" class="form-control w-90" formControlName="answerText">
<span class="mr-2"></span>
<button (click)="removeAnswers(i)">
<i class="fa fa-minus" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
<div class="col-sm-9 has-error" *ngIf="f.answers.touched && !f.answers.valid">
{{mylabels.answerRequired}}
</div>
<div>
</div>
</div>
<div class="col-12 col-md-8 col-sm-12">
<div class="form-group row">
<label for="colFormLabel" class="col-sm-3 col-form-label"> </label>
<div class="col-sm-9">
<div class="add-more-answers ">
<button type="button" (click)="addAnswers()"
class="col-12 col-md-5 col-sm-12 btn btn-blue">{{mylabels.add_more_ans}}</button>
</div>
</div>
</div>
</div>
</ng-container>
<div class="container">
<div class="col-md-12">
<div class="row d-flex justify-content-end">
<button [routerLink]="['/question-list']" type="button"
class="btn btn-gray btn-sm mr-4">{{mylabels.cancel}}</button>
<button type="submit" [disabled]="!questionForm.valid"
class="btn btn-red btn-sm ">{{mylabels.save}}</button>
</div>
</div>
</div>
</form>
Below is TS file code Where I'm creating form controls.
this.questionForm = this.fb.group({
questionText: ['', Validators.required],
questionHelp: '',
questionNote: '',
remarks:'',
multiAns: [false],
answers: this.fb.array([]),
subflow:'',
});
}
Above file is for Answer and Sub flow Drop down. Can anyone here who can help me for solving this issue. below is the screenshot for that save button.
1.Diabled Save Button after selecting sub flow option
2.Enabled Save Button after selecting Answer Option