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("");

}