Angualr4 input 绑定的value不会变化

Question

写了一个表单页面，在input中使用[value]="A.b"的方式绑定了值，目前有一个需求，点击取消时重置表单元素的值，但是在重置的方法中更改了A这个对象的值后发现页面的值没有发生变化。

修改值的代码为:

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

经过测试，如下直接赋一个字符串，页面显示的值是可以正常变化的：

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)

---

现在基本的input的赋值已经解决了，使用了FormGroup中的方法解决的，具体实现代码为：
this.formGroup.get('title').setValue(this.init.title)

但是又有一个新的问题出现了，由于正文部分我使用了一个富文本编辑器，我对它也使用了FormGroup做非空校验，但是使用formGroup的setValue()方法无法给它重新设置值的，而我对富文本编辑器直接设置值也无法生效。（使用的富文本编辑器是wangEditor）

希望有大神能解答我的疑惑。input的值无法随变量改变而变化的原因是什么，是否与FormGroup有关。谢谢各位的回答。

Answer 1

实际上有两种方式来做

使用[(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("");
}