Angualr4 input 绑定的value不会变化

Fortnight
  • 35

写了一个表单页面,在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有关。谢谢各位的回答。

回复
阅读 1.5k
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("");
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏