angular 項目中的表單驗證狀態(tài)刷新的問題

在 angular項目中使用了summernote這個富文本編輯器，通過監(jiān)聽summernote的變化獲取到最新的編輯文本，然后賦值給一個textarea（當(dāng)然是為了演示這個bug）。

問題詳細(xì)描述

首先創(chuàng)建一個表單，這里只關(guān)注test控件（最后一個），這個元素不能為空

this.articleForm = this.formBuilder.group({
    publishAt: ['', Validators.required],
    categoryId: ['', Validators.required],
    tagId: ['', Validators.required],
    title: ['', Validators.required],
    content: ['', Validators.required],
    seoTitle: '',
    seoDescription: '',
    seoKeywordd: '',
    test: ['', Validators.required]
});

然后為了看的清楚，給ng-invalid加一個紅色邊框，然后我會有兩種操作來修改test的值。

通過點擊事件修改test的值
通過監(jiān)聽summernote的change事件修改test的值

先說第一種方法：

方法一

這個時候測試這個控件會和預(yù)期的一樣從invalid變成valid
方法一效果

以下是點擊button的事件函數(shù)：

 setValue(): void {
    this.articleForm.patchValue({
        test: 'hello world'
    });
}

第二種方法

圖片描述

通過監(jiān)聽summernote的值然后賦值給test，這時，值雖然被改變了，但是控件的驗證狀態(tài)確還是invalid

以下是監(jiān)聽事件的代碼：

ngAfterViewInit() {
    this.edit = jQuery("[data-provide=summernote]");
    this.edit.on('summernote.change', () =>  {
        this._setTest();
    });
}

 _setTest():void {
    let content = this.edit.summernote('code');
    this.articleForm.patchValue({
        test: content
    });
}

問題總結(jié)：

我是希望通過第二種方法（監(jiān)聽summernote的變化）賦值也能達(dá)到表單控件重新進(jìn)行驗證的效果，但是貌似并不行，但是我又不知道為什么會發(fā)生這種情況！

結(jié)束語

對于angular我也是剛剛接觸，為了學(xué)習(xí)我特意結(jié)合theadmin這套模板學(xué)做一個博客項目，而在這個問題中，我是希望通過監(jiān)聽summernote的變化來將最新的編輯內(nèi)容賦值給一個隱藏的textarea（被summernote隱藏），但是在實現(xiàn)的過程中，我發(fā)現(xiàn)賦值之后這個控件的驗證狀態(tài)并不會改變，這點很是苦惱，自己研究未果，所以來請教大家，如果愿意幫助解決的可以下載這個項目查看，項目地址 https://github.com/caojianfei/JeBlog.git，路由為/admin/blog/articles/create，如有描述不清楚歡迎留言！謝謝！

回答

編輯回答

我甘愿

jq插件事件不在angular變化監(jiān)測范圍內(nèi)。請在監(jiān)聽jq事件后手動調(diào)用檢測器事件。

import { ..., ChangeDetectorRef } from '@angular/core';
...
constructor(
   ...,
   private changeDetectorRef:ChangeDetectorRef
) { }

ngAfterViewInit() {
   ...
   this.edit.on('summernote.change', () =>  {
       this._setTest();
       this.changeDetectorRef.detectChanges()
   });
}

2018年8月20日 10:18

編輯回答

膽怯

問題有些長，找大塊時間仔細(xì)看一下。
掃了一眼代碼，既然都用angular來開發(fā)應(yīng)用了，為什么還用jquery來直接操作dom呢？
angular提供了好幾個工具類來跟dom交互，比如ElementRef Renderer Renderer2
還是推薦使用angular框架提供的方式來操作dom.

2017年1月17日 09:52