[英]Angular reactive form setting values
I have a list of items.我有一个物品清单。 I can add to this list and also edit this(Problem here)
我可以添加到这个列表中,也可以编辑这个(问题在这里)
When I click to the element there is dialog box with reactive form.当我单击该元素时,会出现带有反应形式的对话框。
Adding working correct, but when I try to edit multiple choice items are empty.添加工作正常,但是当我尝试编辑多项选择项时为空。
Here code when adding :添加时这里的代码:
this.form = this.fb.group({
lastName: this.fb.control(''),
firstName: this.fb.control(''),
secondName: this.fb.control(''),
fio: this.fb.control(''),
iin: this.fb.control('', [Validators.required, Validators.pattern(/^(\d{12})$/)]),
email: this.fb.control('', [Validators.required, Validators.email,]),
status: this.fb.control(''),
systems: this.fb.control(''),
roles: this.fb.control(''),
organization: this.fb.control(''),
userName: this.fb.control(''),
newPassword: this.fb.control(''),
newPassword2: this.fb.control(''),
})
Here when editing (user is object where contains all user details) :在这里编辑时(用户是包含所有用户详细信息的对象):
this.form = this.fb.group({
lastName: user.fio[0],
firstName: this.fb.control(user.fio[1]),
secondName: this.fb.control(user.fio[2]),
iin: this.fb.control(user.iin, [Validators.required, Validators.pattern(/^(\d{12})$/)]),
email: this.fb.control(user.email, [Validators.required, Validators.email,]),
status: this.fb.control(user.status),
systems: this.fb.control(user.systems),
roles: this.fb.control(user.roles),
organization: this.fb.control(user.organization),
userName: this.fb.control(user.userName),
newPassword: this.fb.control(user.newPassword),
newPassword2: this.fb.control(user.newPassword2),
id: this.fb.control(user.id),
})
When I open form lastname firstname fio shows but multiple choice items are not showing.当我打开表单姓氏名字 fio 显示但未显示多项选择项时。
Notice : When I console log fb.conrols('roles') for example.
注意:例如,当我控制台日志 fb.conrols('roles') 时。 It has values I set.
它有我设定的值。
Here's my html template :这是我的 html 模板:
<mat-form-field class="role__input">
<mat-label>{{ 'Роль' | translate }}</mat-label>
<mat-select #mySelect formControlName="roles" required multiple>
<mat-label class="role_label">{{ 'ЕНСИ' | translate }}</mat-label>
<mat-option *ngFor="let role of roles.roleEnsi" [value]="role">
{{role.nameRu}}
</mat-option>
<mat-label class="role_label">{{ 'ФОРМИРОВАНИЕ СРЕЗОВ' | translate }}</mat-label>
<mat-option *ngFor="let role of roles.roleFs" [value]="role">
{{role.nameRu}}
</mat-option>
<mat-label class="role_label">{{ 'АДМИНИСТРАТОР' | translate }}</mat-label>
<mat-option *ngFor="let role of roles.roleAdmin" [value]="role">
{{role.nameRu}}
</mat-option>
</mat-select>
</mat-form-field>
Change your formControl roles
to roles: this.fb.control([])
, because I has an array as data.将您的 formControl
roles
更改为roles: this.fb.control([])
,因为我有一个数组作为数据。
You can set the data by:您可以通过以下方式设置数据:
this.form.setValue(object);
If you use a mat-select
, then you can put the multiple options like so:如果您使用
mat-select
,那么您可以像这样放置多个选项:
<mat-form-field>
<mat-label>Roles</mat-label>
<mat-select formControlName="roles">
<mat-option *ngFor="let role of user.roles" [value]="role">
{{ role }}
</mat-option>
</mat-select>
</mat-form-field>
Set the new values through the form control通过表单控件设置新值
roles: this.fb.control(user.roles);
this.form = this.fb.group({
lastName: [user.fio[0]],
firstName: this.fb.control(user.fio[1]),
secondName: this.fb.control(user.fio[2]),
iin: this.fb.control(user.iin, [Validators.required, Validators.pattern(/^(\d{12})$/)]),
email: this.fb.control(user.email, [Validators.required, Validators.email,]),
status: this.fb.control(user.status),
systems: this.fb.control(user.systems),
roles: this.fb.control(user.roles),
organization: this.fb.control(user.organization),
userName: this.fb.control(user.userName),
newPassword: this.fb.control(user.newPassword),
newPassword2: this.fb.control(user.newPassword2),
id: this.fb.control(user.id),
})
Try like this像这样尝试
this.form.patchValue({
lastName: user.fio[0],
firstName: user.fio[1],
secondName: user.fio[2],
iin: user.iin
email: user.email,
status: user.status,
systems: user.systems,
roles: user.roles,
organization: user.organization,
userName: user.userName,
newPassword: user.newPassword,
newPassword2: user.newPassword2,
id: user.id
});
OR if user json and form model structure is same the simply try like this或者,如果用户 json 和表单模型结构相同,只需像这样尝试
this.form.patchValue(user);
Try this way : consider userRoles is your array list of roles with ids.试试这种方式:考虑 userRoles 是您的带有 id 的角色数组列表。
in .ts在.ts
this.form.patchValue({
roles:user.role_id
});
in .html在 .html 中
<select formControlName="roles" class="form-control">
<option [ngValue]="role.role_id" *ngFor="let role of userRoles"> {{role.role_name}}</option>
</select>
Thank you for all answers, I solved this question today.谢谢大家的回答,今天解决了这个问题。
Problem was about objects.问题是关于对象的。 I set object to [value] so after retrieving data from database objects were not equal .
我将 object 设置为 [value] 因此在从数据库对象检索数据后不相等。
Two different objects (even if they both have zero or the same exact properties) will never compare equally.两个不同的对象(即使它们都具有零或完全相同的属性)永远不会进行相等的比较。 If you need to compare the equality of two object's properties.
如果需要比较两个对象的属性是否相等。
Sooo I changed structure to accept id and transform id to object when sending to backend. Sooo 我改变了结构以在发送到后端时接受 id 并将 id 转换为对象。 It worked.
有效。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.