表格 – 带有预填充数据的Angular2表单验证
发布时间:2020-12-17 17:51:19 所属栏目:安全 来源:网络整理
导读:我有一个带有两个输入字段(文本)的表单.从头开始创建(=无信息)效果很好.你可以猜到,也许我想稍后改变这些值. 问题:当仅更改描述时(并将标题保留为服务器),标题将无效.如果我将最后一个char(Testproject更改为Testproject2)更改,例如它可以工作.我需要改变什
我有一个带有两个输入字段(文本)的表单.从头开始创建(=无信息)效果很好.你可以猜到,也许我想稍后改变这些值.
问题:当仅更改描述时(并将标题保留为服务器),标题将无效.如果我将最后一个char(Testproject更改为Testproject2)更改,例如它可以工作.我需要改变什么? 模板: <form [formGroup]="projectEditForm" novalidate> <div [formGroup]="projectEditForm"> <label>Title</label> <input type="text" [class.validationError]="projectEditForm.controls.Title.invalid && (projectEditForm.controls.Title.dirty || submitted)" value="{{ (project | async)?.ProjectName }}" formControlName="Title"> <label>Description</label> <textarea [class.validationError]="projectEditForm.controls.Description.invalid && (projectEditForm.controls.Description.dirty || submitted)" value="{{ (project | async)?.Description }}" formControlName="Description"></textarea> </div> </form> 表格型号: this.projectEditForm = this._fb.group({ Title: ['',[<any>Validators.required,<any>Validators.minLength(5)]],Description: ['',[<any>Validators.required]] }); 解决方法
您的问题来自于您没有正确使用FormControl.您不应该绑定到输入标记的value属性,因为它是FormControl的作业.
绑定到value属性时,您正在写入dom而不通知FormControl已更改某些内容. 您应该使用FormControl动态设置值.当您从http接收数据时,您只需要调用: this.projectEditForm.get("controlName").setValue(randomValueFromSomewhere); 在你的模板中(注意我删除了类更简洁): <div [formGroup]="projectEditForm"> <label>Title</label> <input type="text" formControlName="Title"> <label>Description</label> <textarea formControlName="Description"></textarea> </div> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |