使用响应式表单进行 Angular 和 froala 编辑器验证答案

【问题标题】：Angular and froala editor validation with reactive forms使用响应式表单进行 Angular 和 froala 编辑器验证
【发布时间】：2018-03-26 01:10:57
【问题描述】：

我正在使用带有 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');
     }
}

【问题讨论】：

你能添加你的 TypeScript 吗？通常我们会期望像form.get('jobDescription').touched 这样的东西，其中form 是您的FormGroup 对象。我们可以从模板中看到jobDescription 是您的控件的名称（作为字符串），因此不能确定它是否也正确设置为引用 FormControl 对象跨度>
@JackKoppa 添加了代码。抱歉耽搁了。
有什么解决办法吗？
@MarceloRodovalho 还没有。如果你找到任何东西，请告诉我。

标签： angular validation froala

【解决方案1】：

你试过了吗

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

然后在你的 html 中 froalaEditor.pristine || !form.get('jobDescription')

【讨论】：