Angular and froala editor validation with reactive forms

I am using Froala Editor with Angular 4 and I am facing some problems with showing the validation message.

<div class="form-group">
<label for="jobDescription">Job Description</label>
<textarea style="height: 300" [froalaEditor] formControlName="jobDescription" name="jobDescription" id="jobDescription" cols="30"
rows="10" class="form-control"></textarea>
<div class="text-danger" *ngIf="!jobDescription?.valid && jobDescription.touched">
<span class="text-danger" *ngIf="jobDescription.errors?.required">Job Description is Required.</span>
</div>
</div>


I want to show the validation message only when the field is touched. However the touched state doesn't become true. If I remove jobDescription.touched from *ngIf then when the field is empty, validation message is shown. The problem is that the validation message is there from the beginning (before the field is even touched). Any idea how to fix this? This is how my .ts file looks.

export class JobFormComponent {
form = new FormGroup({
jobDescription: new FormControl('', Validators.required),
...
...
});

get jobDescription() {
return this.form.get('jobDescription');
}
}

Continue reading...