Angualr4 input 綁定的value不會變化

寫了一個表單頁面，在input中使用[value]="A.b"的方式綁定了值，目前有一個需求，點擊取消時重置表單元素的值，但是在重置的方法中更改了A這個對象的值后發(fā)現(xiàn)頁面的值沒有發(fā)生變化。

修改值的代碼為:

this.A = Object.assign({}, A);

經(jīng)過測試，如下直接賦一個字符串，頁面顯示的值是可以正常變化的：

this.A.b = 'xxx';

頁面代碼如下：

<div class="form-group row">
                <div class="col-md-8">
                    <input type="text" id="title" placeholder="請輸入文章標題" [value]="article.title" formControlName="title">
                </div>
            </div>

重置值的代碼如下：

cancel() {
        // this.article = Object.assign({}, this.article);
        this.article.title = this.init.title;
        console.log(this.article);
    }

init是在ngOnInit中賦值的：

this.init = Object.assign({}, this.article)

現(xiàn)在基本的input的賦值已經(jīng)解決了，使用了FormGroup中的方法解決的，具體實現(xiàn)代碼為：
this.formGroup.get('title').setValue(this.init.title)

但是又有一個新的問題出現(xiàn)了，由于正文部分我使用了一個富文本編輯器，我對它也使用了FormGroup做非空校驗，但是使用formGroup的setValue()方法無法給它重新設置值的，而我對富文本編輯器直接設置值也無法生效。（使用的富文本編輯器是wangEditor）

希望有大神能解答我的疑惑。input的值無法隨變量改變而變化的原因是什么，是否與FormGroup有關。謝謝各位的回答。

回答

編輯回答

放開她

實際上有兩種方式來做

使用[(ngMode)]l來做雙向綁定

[value]只是單向綁定

<div class="form-group row">
   <div class="col-md-8">
        <input type="text" id="title" placeholder="Please input article title" [(ngModel)]="article.title"">
   </div>
   <button class="btn btn-primary" (click)="onCancel()">Cancel</button>
</div>

article: any = {
   title: ""
};

onCancel(): void {
    this.article.title = "";
    //或者
    this.article.title = "";
    this.article = Object.assign({}, this.article);
}

在做這個Object.assign(targetObject, sourceObject)之前，一定要先把title置空啊，要不然你只是copy了一下object， input當然沒有被清空了。

使用angular Form來做

<div class="form-group row" [formGroup]="formGroup">
    <div class="col-md-8">
         <input type="text" id="title" placeholder="Please input article title" formControlName="title">
    </div>
    <button class="btn btn-primary" (click)="onCancel()">Cancel</button>
</div>

formGroup: FormGroup;
ngOnInit() {
   this.formGroup = new FormGroup({});
   this.formGroup.addControl("title", new FormControl());
}

onCancel(): void {
   this.formGroup.get("title").setValue("", true);
   //或者
    this.formGroup.get("title").reset("");
}

2018年5月16日 06:13