使用反应形式进行Angular和froala编辑器验证

发布时间：2020-12-17 16:59:23 所属栏目：安全来源：网络整理

导读：我正在使用带有Angular 4的Froala编辑器,我在显示验证消息时遇到了一些问题. div class="form-group" label for="jobDescription"Job Description/label textarea style="height: 300" [froalaEditor] formControlName="jobDescription" name="jobDescriptio

我正在使用带有Angular 4的Froala编辑器,我在显示验证消息时遇到了一些问题.

<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>

我只想在触摸该字段时显示验证消息.然而,触摸状态不会成为现实.如果我从* ngIf中删除jobDescription.touched,那么当该字段为空时,将显示验证消息.问题是验证消息从一开始就存在(在触摸字段之前).知道如何解决这个问题吗？
这就是我的.ts文件的样子.

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

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

解决方法

你有没有尝试过

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

然后在你的HTML中froalaEditor.pristine || ！form.get( ‘jobDescription’)

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!