4

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');
     }
}
Iman
  • 717
  • 15
  • 32
  • Could you add your TypeScript? Normally we would expect something like `form.get('jobDescription').touched`, where `form` is your FormGroup object. All we can see from the template is that `jobDescription` is the *name* of your control (as a string), and so can't be sure that it's also properly set to reference the FormControl object – Jack Koppa Oct 13 '17 at 21:27
  • @JackKoppa Added the code. sorry for the delay. – Iman Oct 16 '17 at 20:41
  • Any solution for that? – Marcelo Rodovalho Oct 18 '17 at 19:26
  • @MarceloRodovalho Nothing yet. Please let me know if you find any. – Iman Oct 24 '17 at 14:58

1 Answers1

0

have you tried 

/**
 * on after content init lifecycle hook
 */
ngAfterContentInit() : void {
    this.froalaEditor.markAsPristine();
    this.froalaEditor.markAsUntouched();
}

then in your html froalaEditor.pristine || !form.get('jobDescription')

flashdave
  • 1
  • 2