无法使用具有选择值的patchValue绑定到对象
问题：无法使用具有选择值的patchValue绑定到对象
回答： 在前端开发中，当我们使用Angular框架进行表单处理时，有时会遇到无法使用具有选择值的patchValue绑定到对象的问题。这通常是由于表单控件和数据模型之间的不匹配引起的。
解决这个问题的方法是确保表单控件的值与数据模型的属性类型相匹配。以下是一些可能导致该问题的常见原因和解决方法：
- 数据类型不匹配：检查数据模型中属性的数据类型是否与表单控件的值类型相匹配。例如，如果数据模型中的属性是字符串类型，而表单控件的值是数字类型，则会导致无法绑定的问题。确保它们的类型一致。
- 表单控件名称不匹配：确保表单控件的名称与数据模型中属性的名称相匹配。如果名称不匹配，patchValue将无法正确地将值绑定到对象。
- 表单控件的选择值不在选项列表中：如果表单控件是一个下拉列表或复选框，并且选择的值不在选项列表中，patchValue将无法绑定到对象。确保选择的值在选项列表中。
- 表单控件的选择值类型不匹配：如果表单控件的选择值类型与数据模型中属性的类型不匹配，patchValue将无法正确地绑定到对象。确保它们的类型一致。
如果以上方法都无法解决问题，可能需要进一步检查代码逻辑和调试。可以使用浏览器的开发者工具来查看控制台输出和网络请求，以帮助定位问题所在。
腾讯云提供了一系列云计算相关的产品，可以帮助开发者构建和管理云端应用。其中，腾讯云的云服务器（CVM）产品提供了高性能、可扩展的虚拟服务器实例，可满足各种计算需求。您可以通过以下链接了解更多关于腾讯云云服务器的信息：腾讯云云服务器产品介绍
请注意，本回答仅提供了一般性的解决方法和腾讯云相关产品的介绍，具体解决方案可能因实际情况而异。在实际开发中，建议根据具体问题和需求进行进一步的调查和研究。
相关·内容
我在模板中使用primeng组件。我有编辑表单的选项，它显示了现有的字段值。我无法修补多重选择下拉列表的值。
excludeDays = [
{label: 'Mon', value: 1},
{label: 'Tue', value: 2},
{label: 'Wed', value: 3},
{label: 'Thu', value: 4},
{label: 'Fri', value: 5},
{label: 'Sat', value:
浏览 4提问于2022-03-12得票数 1
回答已采纳
在select中设置默认选项有问题。我从服务器获得数组，我想选择数组中的第二项，即documentTypes1。这是我的代码和我试图做的。
选择
<select formControlName="type">
<option *ngFor="let document of documentTypes" [ngValue]="document" [attr.selected]="selectedType">{{document.name | translate}}</option>
<
浏览 3提问于2017-03-06得票数 1
回答已采纳
2回答
我希望使用从其他组件获取的值来生成Reactiev表单。要将数据传递给组件，我使用@Input。
例如：
import { Component, OnInit, Input } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
...
})
export class GetData implements OnInit {
@Input() dataToPass: DataOne;
myForm
浏览 4提问于2019-09-18得票数 0
回答已采纳
我正在使用model driven forms，我正在寻找一种更好的方法将数据绑定到与formControlName相关的数据，因为我的表单上有超过25个字段，而且我不想像下面所写的那样为所有字段编写代码。
模板：
<input type="text"
class="form-control"
formControlName="firstName"
name="firstName"
placeholder="First Name"
requ
浏览 3提问于2017-02-22得票数 2
回答已采纳
1回答
我已经创建了一个具有动态添加和删除控件的能力的角7应用程序。但是，我不知道如何将数据绑定到表单。
在下面的代码中，我试图添加和删除网站。我找出了数据没有绑定到UI元素的原因。FirmDetails模型下的网站是一组对象。在进行测试的时候，我添加了websiteUrl: FirmDetails.Websites.WEBSITE_URL。如果我有不止一个对象。那我该怎么绑呢？
用户界面
<div class="form-group row">
<label for="inputEmail" class="col-md-1 col-f
浏览 0提问于2019-02-20得票数 0
我需要你的帮助。我有一小部分代码，我想用它将我的字段发送到后端。代码中没有错误，我在数据库中得到了对象，但是在发送表单之后，我得到了以下错误：
TypeError: this.form.get is not a function。
我做错了什么，我的错误在哪里？非常感谢
import { Component, OnInit } from '@angular/core';
import {FormBuilder, FormGroup} from "@angular/forms";
import {UserService} from "../services
浏览 4提问于2022-05-03得票数 1
回答已采纳
2回答
Select不显示修补值
、、、
我有一个带有表单控制货币的表单。货币对象看起来如下{id: string；符号: string}；在init上，货币选择在一个货币数组上迭代；在验证了一个条件之后，我需要将一个货币对象修补到我的select上。
const currency = {id: '2', symbol: 'CAD'}
this.currency.patchValue(currency);
console.log(this.currency.value);
输出是正确的：{id：'2'，符号：'CAD'}，但是在我的下拉列表中没有选择的选项
<se
浏览 6提问于2021-07-23得票数 0
回答已采纳
1回答
我有个模特：
export class ProfileModel {
constructor(
public name: string,
public age: number,
...
...
){}
}
我构建了一个更新值的表单：
<form [formGroup]="profileForm" (ngSubmit)="updateProfile(profileForm.value)" autocomplete="off">
<!-- Name -->
浏览 1提问于2018-04-18得票数 1
回答已采纳
1回答
我想根据对象中的数据在选择列表中显示一些选项。例如，如果数据属性为0，我希望将select选项显示为0，并将选项更改为1，反之亦然。但是，在html中，字段中不播放选项值。我做错什么了？
这是我的代码：
<div class="form-group">
<label for="isVisible" class="label">Set Visibility</label>
<select *ngIf="category.isVisible ===
浏览 3提问于2022-07-03得票数 0
对于我正在构建的应用程序，我从API中检索数据，并使用该响应直接设置我的表单值。为此，我使用了反应性表单模块。我构建了这个表单，以便它与我从API中获得的对象相匹配。问题是，有些字段应该是对象(FormGroup)，但当为空时为空。这将导致错误“无法将未定义或null转换为对象”。
FormGroup实例：
note: this.formBuilder.group({
turnbook_file: [''],
note: [''],
additional_files: ['']
});
来自API的响应
note: NULL
我
浏览 0提问于2018-12-13得票数 12
1回答
最近，我试图使用值访问器创建一个自定义的dropdown组件，但是我不能为这个dropdown设置一个值。
dropdown组件的这部分
<mat-form-field>
<mat-label>Favorite food</mat-label>
<mat-select>
<mat-option *ngFor="let food of foods" [value]="food.value">
{{food.viewValue}}
浏览 0提问于2020-01-26得票数 2
3回答
我有一个角反应型和一个嵌套型组。
this.form = new FormGroup({
name: new FormControl(),
address: new FormGroup({
line1: new FormControl(),
line2: new FormControl()
})
});
如果我使用一个包含嵌套字段的对象调用form.patchValue，一切都可以正常工作：
this.form.patchValue({
name: 'test',
address: {
line1: 'test l
浏览 1提问于2019-10-31得票数 2
回答已采纳
2回答
以下示例代码：
model={name: "D100"
value: "Dying"};
for (let key in model) {
if(this.divisionForm.controls.hasOwnProperty(key)) {
let value = divisionModel[key];
this.form.patchValue({
key: value
});
浏览 1提问于2018-11-21得票数 4
1回答
我已经使用builder创建了一个嵌套的表单组。在数据库中添加数据是成功的，但当我试图将数据映射回相同的形式时，不确定如何实现它。我认为双向绑定会有帮助，但会面临很多问题。有没有人能建议一下如何在嵌套表单组中实现双向绑定？
ngOnInit(){
this.myForm = this._fb.group({
name: ['', [Validators.required, Validators.minLength(5)]],
addresses: this._fb.array([
this.initAddress(),
]),
search:[&#
浏览 66提问于2018-06-08得票数 1
回答已采纳
1回答
除非保留相同列表的引用，否则ngValue不会绑定该值。这是正确的吗？
这样做是行不通的：
this.myForm.get('user').patchValue(this.currentUser);
这将起作用：
const findIndex = this.user.findIndex(
(item) => item.id == this.currentUser.id
);
this.myForm.get('user').patchValue(this.user[findIndex]);
此外，我还讨论了另一个属性compareWith，它也可以用于
浏览 1提问于2021-09-19得票数 0
回答已采纳
我正以角度面对以下问题。我有一个父组件，它操作一个大型的JSON。
export class ParentComponent implements OnInit {
myDataObservable$: Observable<MyObject>;
ngOnInit(): void {
this.myDataObservable$ = this.myService.fetchMyData();
}
模板：
<ng-container *ngIf="myDataObservable$ | async as myData; else loading"&g
浏览 0提问于2022-05-02得票数 0
当我使用this.programTypeForm.setValue(programType)将response值设置为FormGroup varriable (programTypeForm)时，我得到了错误消息“无法找到名称为:CreatedOn的表单控件”。在Subscriber.js文件中
this.programTypeForm = this.fb.group({
VersionNumber:[null],
ProgramTypeID: [null],
ProgramTypeName: [null, Valid
浏览 0提问于2017-10-04得票数 2
不好意思，角的动态形式如何绑定到定义的数据模型对象上，以实现表单数据对模型对象的实时响应，类似于角的双向绑定效果。
我定义了一个数据模型对象，定义了一个动态表单对象，然后将数据模型对象绑定到动态模型中。但是，动态窗体的窗体值没有映射到绑定数据模型对象。
/*Model Object*/
export Class StudentModel{
Name:string
}
@Component(....)
export Class OneComponent implements OnInit{
public validateForm :FormGroup;
public stu
浏览 0提问于2019-02-09得票数 1
回答已采纳
2回答
我有我的网站上的设置，我需要填充所有的默认值-我的用户当前设置的所有字段。
在用户输入他的设置后，我会发出一个异步的GET请求，在它完成之后，我需要将他的设置作为默认值传递给我的表单字段。
如我所知，我可以使用以下语法传递默认值：
this.validateForm = this.fb.group({
language: ['default_value', [Validators.nullValidator]],
timeZone: ['default_value', [Validators.nullValidator]],
firstN
浏览 2提问于2020-08-12得票数 0
回答已采纳
1回答
我在ngOnInit()方法中创建了这个表单：
this.cardForm = this.fb.group({
card_number: ['', Validators.required],
holderName: ['', Validators.required],
expiry: ['', Validators.required],
cvc: ['', Validators.required],
address_line1: ['', Validators.require
浏览 3提问于2017-04-06得票数 0
我在html页面中有一个简单的表单。现在，这是一个“add”表单，所以当我用ID打开页面时，我应该用ObjectId值编译所有输入，当我打开没有Id的页面时，我应该能够手动编译所有输入，然后将对象添加到数据库中。问题是，我无法使用以下方法读取/写入输入字段的值：
this.form.get["inputName"].setValue(value);
控制台显示：
Cannot read property 'setValue' of undefined
这是html代码：
<form [formGroup]="form" (ngSubmit
浏览 5提问于2020-01-28得票数 0
回答已采纳
2回答
我正在挣扎于Reactive ，我有一个级联下拉列表，如果用户在第一个页面中选择了一个现有的项目(问题在这个页面中)，那么这个下拉列表就会有一个默认值，如果用户想要创建一个项目，那么下拉列表就不会呈现任何值。
所以问题是：
当用户来自一个现有的项目时，就会选择价格表，但是它似乎没有任何价值，因为没有显示货币。当我再次按预期选择货币的价格表时，有谁能解决这个问题呢？谢谢已经提前了。
这是代码示例，谢谢您抽出时间
JSON (从pageChanged()返回)
Component.ts (自动选择值)
pageChanged(event){
const current =
浏览 7提问于2020-01-27得票数 3
回答已采纳
我需要将多个输入组件绑定到单个角响应形式，但我有两个问题：
只更新发生用户输入的表单。
如果我使用(ngModel)，它可以工作，但也会触发第二个更改事件。
如何在不触发第二个事件的情况下使两个选择组件与数据模型保持同步？
模板
<select [(ngModel="foo")] [formControl]="bar">
<option *ngFor="let foo in foos" [value]="foo.value"> {{foo.name}}</option>
&
浏览 0提问于2018-11-12得票数 1
回答已采纳
我在模板标记中有一个带有以下代码的Modal表单
<form [formGroup]="modalFG">
...
<ion-item *ngIf="isChangeStatus()">
<ion-select formControlName="jobStatus"
(ionChange)="jobStatusChangeHandler($event)">
<ion-option value=4>Succes
浏览 1提问于2017-11-11得票数 17
回答已采纳
我希望能够使用组件构建一个反应性表单，但不希望将其全部设置在一个父组件中。因此，我创建了初始FormGroup并将其传递给组件，然后组件执行this.form.addControl(this.fb.group({ ... }));将它们的组添加到表单中。
示例
父组件
this.form = this.fb.group({}); // Empty
public ngAfterViewInit() {
// Throws error after trying to patchValue on the child component
this.form.get('example&
浏览 2提问于2018-06-19得票数 5
1回答
User类如下：
export class User {
name: string
details: Details;
}
详细信息类如下：
export class Details {
country: Country;
major : Major;
}
主修班如下：
export class Major{
department : string;
subject : Subject;
}
我创造了如下形式：
userForm : FormGroup;
constructor(private fb: FormBuilder){}
ngOnInit(): vo
浏览 1提问于2022-02-15得票数 0
回答已采纳
我有一个如下所示的基本表单。我调用一个API来获取用户的个人信息，并希望用适当的值填充表单域。我一直在尝试使用patchValue，但是我不能让它工作。
<form (ngSubmit)="onSubmit" class="example-form" [formGroup]="firstFormGroup" #registerForm="ngForm">
<mat-form-field class="example-full-width">
<input matInput
浏览 0提问于2018-08-09得票数 1
回答已采纳
2回答
我创建了一个表单，使用反应性表单和角质材料mat-选择，用于创建一个名为"core“的对象。核心对象有两个属性：“名称”和“所有者”。“所有者”属性是IUser对象的数组。
核心目标：
export interface ICore {
id?: number;
name: string;
owners: IUser[];
}
表格：
<form [formGroup]="parentForm">
<mat-form-field class="example-full-width">
<
浏览 1提问于2019-05-17得票数 13
回答已采纳
目前正在使用反应式表单。
设置patchValue是可行的。
this.addressForm.patchValue({city:'Atlanta'});
现在，当尝试清除/重置该字段时，patchvalue仅适用于1个空格
this.addressForm.patchValue({city:' '});
this.cdr.detectChanges();
它不适用于null或'‘(0空格)
资源：
浏览 0提问于2019-11-12得票数 1
2回答
有什么简单的方法可以用自动映射器来修补角形吗？我想上一堂课，把完全相同的成员名字放进表格里。我不喜欢写作，因为公司有很多表格，并且尽量避免重复编码(干原理)等等。
this.editAddressForm.patchValue({
'streetNumber': this.addressMailingData.streetNumber,
'predirectional': this.addressMailingData.predirectional,
'streetName': this.addressMail
浏览 0提问于2019-11-11得票数 0
回答已采纳
我有一个下拉列表的对象。它是一个person对象，具有id、firstName和lastName的属性。
<select formControlName="person">
<option *ngFor='let person of persons" [ngValue]="person">{{person.firstName+' '+person.lastName}}</option>
</select>
假设我有一个对象人，我想检查这个人对象是否在下拉列表中。如果存在，我希
浏览 2提问于2017-04-14得票数 1
回答已采纳
2回答
我从API中检索init上的一些数据，并在我的视图中显示它们，以便预先填充一些字段。
我是一个表单视图，包含：
<ion-textarea formControlName="job_description" class="form-control desc" value="{{resDesc?.job_description}}"></ion-textarea>
当我提交这份表格时，我试着从以下方面获得数据：
this.form.get('job_description').value
一直都是空的..。除
浏览 3提问于2020-01-31得票数 1
回答已采纳
我有一个角度反应式表单，表单中的一些字段是预先填充的。我想实现一个‘取消’按钮，将重置所有更改的表单，除了数据是预先填充时，页面加载。我尝试了以下操作，但它会重置整个表单： resetForm() {
this.myForm.reset();
} 有没有一种方法可以只重置当前的更改，而不重置整个表单？
浏览 14提问于2020-12-22得票数 0
回答已采纳
我有一个Edit Profile视图，我从远程服务器获取数据，然后我想用从服务器返回的数据填充表单。这是我所尝试过的，而且运作良好，但我不知道这是否正确的做法。
所以在ngOnInit(中)我正在创建formBuilder，实际上表单比这个大很多，所以为了保持问题的简单，我只添加了两个字段
ngOnInit() {
this.profile = this.formBuilder.group({
firstName: ['', [Validators.required]],
lastName: ['Last Name'],
浏览 2提问于2017-04-20得票数 1
回答已采纳
我已经检查了这里的，但我没有找到任何关于emitEvent的默认值的信息。
patchValue(value: {[key: string]: any}, options: {onlySelf?: boolean, emitEvent?: boolean}): void
有人知道这个值是什么吗？我很高兴能提供一些可靠的来源。
浏览 0提问于2017-09-13得票数 0
我正在尝试重新填充使用mat自动完成的输入。但是，每当我用this.optionForm.patchValue({selectedOption: 'my value'})发送值时，结果都不会显示在GUI中。如果我是console.log()，我可以清楚地看到这个值是被设置的。我不确定这个问题是否与我有时在字段中设置一个对象，而其他时候只设置一个字符串这一事实有关？但是我希望能够用结果重新填充输入并适当地显示它。无论我如何努力，我似乎无法得到显示的结果。
下面是我的组件，简化为所讨论的输入，并为mat-autocomplete获取可观察的结果。在第一次使用表单时，这些操作都很好。
浏览 1提问于2019-02-11得票数 0
回答已采纳
我正在使用一个角度表单生成器来添加数据，其中表单有一个绑定到对象的select元素，但是当我尝试使用patch value方法或set value方法字段编辑表单时，除了select是用正确的数据归档之外，请有人纠正我。
html
<form [formGroup]="addCountryForm">
<div class="form-group">
<label for="countryControl">Name</label>
<select class
浏览 18提问于2019-03-27得票数 3
回答已采纳
我试图动态地将一个值赋值给自动完成，但它不起作用。
<label for="centerId" class="control-label">Center</label>
<p-autoComplete formControlName="center" id="centerId" [suggestions]="iCenter" placeholder="Center (required)" (co
浏览 0提问于2018-09-10得票数 0
回答已采纳
我遇到了一个我不明白的问题。我有一个没有几个控件的formGroup，下面是一个简化的代码：
.ts
form = new FormGroup({
firstName: new FormControl(''),
lastName: new FormControl('')
})
.html
<input type="text" formControlName="firstName" />
<input type="text" formControlName="lastName&#
浏览 24提问于2022-04-03得票数 0
10回答
这简直把我逼疯了，我被逼疯了，不能再花一整天时间在这上面了。
我试图在组件中手动设置一个控件值('dept')，但它只是不起作用--即使是新的值日志也无法正确地进行控制台操作。
下面是FormBuilder实例：
initForm() {
this.form = this.fb.group({
'name': ['', Validators.required],
'dept': ['', Validators.required],
'description': ['
浏览 2提问于2016-01-27得票数 266
回答已采纳
我有一个角度驱动的模板形式，当我点击一个产品时，我想在它上填充值。字段'description‘和'imageUrl’可能是未定义的，如果我不处理它，就会破坏我的表单。我设法用这个解决方案做到了这一点：
private initFormEdit() {
this.product = this.productService.fetchProduct(this.restaurantId, this.productId);
// I'm using a ternaty operator to put a default value if objects
浏览 6提问于2020-06-11得票数 0
回答已采纳
2回答
我正在设置一组具有不同级别值的复选框。可以选择多个级别，然后使用submit按钮提交。然后，submit按钮应该将这些值作为参数传递给类型记录类中的函数。
我想将这些值作为参数传递。例如，如果只选择第一级和第二级，则方法和参数如下所示：
levelSave(value1，value2)
提前感谢！
HTML
<div class="form-group">
<li><input type="checkbox" id="level1" value="1" required><l
浏览 2提问于2019-04-20得票数 0
回答已采纳
2回答
我无法在表单中获取要编辑/更新的对象值。获取此错误：
ERROR TypeError: Cannot read properties of undefined (reading 'productName')
at UpdateProductComponent.ngOnInit (update-product.component.ts:63:33)
at callHook (core.mjs:2576:22)
at callHooks (core.mjs:2545:17)
at executeInitAndCheckHooks (core.mjs:
浏览 10提问于2022-06-16得票数 0
HTML -
<select (change)="selectRegion($event.target.value)" [ngClass]="{'error-control': !editForm.get('region').valid && editForm.get('region').touched}" id="region" type="text" placeholder="region" formControlName="reg
浏览 0提问于2020-11-03得票数 0
我的组合框有一个绑定到有效值集合的ItemsSource。但是NULL也是有效的。困难在于，如果用户从组合框中选择一个项目，他们就无法返回到"null“。有一些我可以想象的解决办法：
null).manually 在组合框旁边放置某种类型的"x“，以”删除“所选的值(将添加一个”空“项到项的集合中。。
我不喜欢选项1，因为各种各样的原因:形象化，没有吸引力，和两个令用户困惑，因为你不经常在野外看到这一点。我不喜欢选项2，仅仅是出于怨恨，因为我觉得必须处理来自服务器的一组值是一个不幸的解决办法。
也许，在将组合框选择的值绑定到可空属性方面，我遗漏了一些显而易见的东西。
浏览 4提问于2012-01-16得票数 0
在本例中，我使用的是反应式表单，而不是ngModel
我正在向输入文本字段中写入内插值
当我提交我的表单时，我得到了所有的字段值，除了插入的那个。插值为空
如何修复？？
<label class="form-control-sm"
id="identificationCode"
name="identificationCode">{{reference.value + "-" + publishDate.value}}
</label>
<input #txtId
浏览 26提问于2019-08-07得票数 0
4回答
当我对离子选择元素使用formcontrolname时，从一开始就不会显示所选的值。只有当我单击select元素或使用setTimeout()时，它才会出现：
html：
<form [formGroup]="formGroup">
<ion-row>
<ion-col>
<ion-select okText="{{ 'common.ok' | translate }}"
浏览 9提问于2022-02-23得票数 0
我想知道是否可以使用一个else函数来计算条件，并根据用户选择设置一个不同的值
示例：
typeRequest(){
If(inboundAddress != "") {
RequestType: Inbound
}else (inboundAddess == "") {
RequestType: notSelected}
我想在这个函数周围使用一个patchValue来将RequestType值存储在表单控件名中。
如果可能的话请协助..。如果不是，请给我一个关于我如何完成这件事的想法。
浏览 1提问于2022-07-17得票数 0
6回答
无法将值修补到FormArray resultList。
谁能解释一下，我错过了什么？
TS文件：
import { Component, OnInit } from '@angular/core';
import { Student } from '../student';
import { FormGroup, FormControl, Validators, FormArray } from '@angular/forms';
@Component({
selector: 'app-container',
temp
浏览 0提问于2018-04-08得票数 17
回答已采纳
可以在下面的url中使用下面的数组数据吗？
[{"columnName":"Column 1 - Type of Medication\n Number of Medications","selected":false},{"columnName":"Column 2 - Placebo\n(N=7)\nn (%)","selected":false},{"columnName":"Column 3 - Perampanel\n(N=25)\nn (%)","
浏览 2提问于2022-06-14得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
