Angualr4 input 綁定的value不會(huì)變化

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

修改值的代碼為:

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

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

this.A.b = 'xxx';

頁(yè)面代碼如下：

<div class="form-group row">
                <div class="col-md-8">
                    <input type="text" id="title" placeholder="請(qǐng)輸入文章標(biāo)題" [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中的方法解決的，具體實(shí)現(xiàn)代碼為：
this.formGroup.get('title').setValue(this.init.title)

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

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

回答

編輯回答

放開(kāi)她

實(shí)際上有兩種方式來(lái)做

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

[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);
}

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

使用angular Form來(lái)做

<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