Angular 反应形式设置值
Angular reactive form setting values
我有一个物品清单。
我可以添加到这个列表并编辑这个(这里有问题)
当我单击该元素时,会出现反应形式的对话框。
添加工作正常,但是当我尝试编辑多选项目时,它们是空的。
添加时的代码:
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(''),
})
编辑时此处(用户是包含所有用户详细信息的对象):
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),
})
当我打开表格 lastname firstname fio 时显示但多选项目没有显示。
注意:例如,当我控制台记录fb.conrols('roles')时。它具有我设置的值。
这是我的 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>
尝试使用 patchValue
this.form.patchValue(user);
通过表单控件设置新值
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),
})
像这样尝试
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
});
或者如果用户 json 和表单模型结构相同,只需像这样尝试
this.form.patchValue(user);
将您的 formControl roles
更改为 roles: this.fb.control([])
,因为我有一个数组作为数据。
您可以通过以下方式设置数据:
this.form.setValue(object);
如果您使用 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>
试试这个方法:
考虑 userRoles 是你的角色数组列表与 ids。
在 .ts 中
this.form.patchValue({
roles:user.role_id
});
在.html
<select formControlName="roles" class="form-control">
<option [ngValue]="role.role_id" *ngFor="let role of userRoles"> {{role.role_name}}</option>
</select>
谢谢大家的解答,我今天解决了这个问题。
问题是关于对象的。我将对象设置为 [value],因此在从数据库中检索数据后,对象不相等。
两个不同的对象(即使它们都具有零个或完全相同的属性)永远不会进行相等比较。如果需要比较两个对象的属性是否相等。
所以我更改了结构以在发送到后端时接受 id 并将 id 转换为对象。成功了。
我有一个物品清单。
我可以添加到这个列表并编辑这个(这里有问题)
当我单击该元素时,会出现反应形式的对话框。
添加工作正常,但是当我尝试编辑多选项目时,它们是空的。
添加时的代码:
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(''),
})
编辑时此处(用户是包含所有用户详细信息的对象):
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),
})
当我打开表格 lastname firstname fio 时显示但多选项目没有显示。
注意:例如,当我控制台记录fb.conrols('roles')时。它具有我设置的值。
这是我的 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>
尝试使用 patchValue
this.form.patchValue(user);
通过表单控件设置新值
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),
})
像这样尝试
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
});
或者如果用户 json 和表单模型结构相同,只需像这样尝试
this.form.patchValue(user);
将您的 formControl roles
更改为 roles: this.fb.control([])
,因为我有一个数组作为数据。
您可以通过以下方式设置数据:
this.form.setValue(object);
如果您使用 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>
试试这个方法: 考虑 userRoles 是你的角色数组列表与 ids。
在 .ts 中
this.form.patchValue({
roles:user.role_id
});
在.html
<select formControlName="roles" class="form-control">
<option [ngValue]="role.role_id" *ngFor="let role of userRoles"> {{role.role_name}}</option>
</select>
谢谢大家的解答,我今天解决了这个问题。
问题是关于对象的。我将对象设置为 [value],因此在从数据库中检索数据后,对象不相等。
两个不同的对象(即使它们都具有零个或完全相同的属性)永远不会进行相等比较。如果需要比较两个对象的属性是否相等。
所以我更改了结构以在发送到后端时接受 id 并将 id 转换为对象。成功了。