如何确保角反应式setValue/patchvalue是完整的
在Angular中，我们可以使用响应式表单来处理表单数据。当我们使用setValue或patchValue方法来设置表单控件的值时，确保角反应式setValue/patchValue是完整的，可以通过以下几个步骤来实现：
- 确保表单控件已经创建：在调用setValue或patchValue之前，确保表单控件已经创建并与模板中的表单控件绑定。可以通过在组件中使用FormControl或FormGroup来创建表单控件。
- 创建表单控件的初始值：在调用setValue或patchValue之前，可以先创建一个包含所有表单控件的初始值的对象。这个对象的属性名应该与表单控件的名称相匹配。
- 使用setValue方法设置表单控件的值：使用setValue方法可以设置表单控件的值。这个方法需要传入一个对象，对象的属性名与表单控件的名称相匹配，属性值为要设置的值。
- 例如，如果有一个名为"username"的表单控件，可以使用以下代码设置它的值：
- 例如，如果有一个名为"username"的表单控件，可以使用以下代码设置它的值：
- 这里的"myForm"是FormGroup的实例，通过get方法可以获取到"username"表单控件的引用。
- 使用patchValue方法设置表单控件的值：使用patchValue方法可以部分地设置表单控件的值。这个方法也需要传入一个对象，对象的属性名与表单控件的名称相匹配，属性值为要设置的值。
- 例如，如果有一个名为"username"的表单控件，可以使用以下代码设置它的值：
- 例如，如果有一个名为"username"的表单控件，可以使用以下代码设置它的值：
- 这里的"myForm"是FormGroup的实例，通过get方法可以获取到"username"表单控件的引用。
- 确保所有需要设置的表单控件都被包含：在使用setValue或patchValue方法设置表单控件的值时，确保所有需要设置的表单控件都被包含在传入的对象中。否则，未包含的表单控件将保持其原始值不变。
- 例如，如果有一个名为"password"的表单控件，可以使用以下代码同时设置"username"和"password"的值：
- 例如，如果有一个名为"password"的表单控件，可以使用以下代码同时设置"username"和"password"的值：
- 或者，可以使用以下代码部分地设置"username"的值，而保持"password"的值不变：
- 或者，可以使用以下代码部分地设置"username"的值，而保持"password"的值不变：
以上是确保角反应式setValue/patchValue是完整的步骤。在实际应用中，可以根据具体的需求和业务逻辑来选择使用setValue或patchValue方法来设置表单控件的值。
相关·内容
我似乎无法在我的spec文件中获得正确的依赖项来测试我创建的新表单。
我有两个测试通过了，但当我使用setValue或patchValue设置我的测试表单数据时，第三个测试变得很麻烦。
浏览器中的因果报应：TypeError: Cannot read property 'patchValue' of undefined
import { TestBed, async } from '@angular/core/testing';
import { Component, ViewChild } from '@angular/core';
impor
浏览 0提问于2017-04-15得票数 2
当我尝试通过使用this.formdata.get('mandal').setValue(this.SingleFieldDetails.contact.city)，来设置角度形式控件选择值时，当this.SingleFieldDetails.contact.city类似于"ABCD“时，其工作正常，但当this.SingleFieldDetails.contact.city类似于"ABCD(ABCD)”时，上述代码不起作用。使用.can时，请告诉它有什么问题，而月是表单控件下拉菜单的名称 <div class="form-group"
浏览 33提问于2021-03-26得票数 0
2回答
我有一个角反应形式(角版本9)。
表单需要一个select下拉列表，该下拉列表由一个enum填充。
我导入枚举，并对构造函数中的键进行筛选，以提取字符串文本来创建下拉列表。
myForm: FormGroup;
statusList = StatusEnum;
statuskeys: any[];
constructor(
private alertify: AlertifyService,
private activeRoute: ActivatedRoute,
private fb: FormBuilder,
private router: Router,
浏览 3提问于2021-01-25得票数 0
我想充分理解.value和.setValue在角7+中的区别，以及在何种情况下适合使用.value或.setValue？
例1：this.createLocForm.setValue(data);
例2：this.data = this.createLocForm.value
浏览 5提问于2020-01-04得票数 16
回答已采纳
我有一个反应式表单，两个输入字段正在更改来自Eventemitter的值(纬度和经度的值来自事件发射器(子组件))
这是我的child.component.ts，我在其中向父组件发送值...
this.lat.emit(this.latitude.toString());
this.lon.emit(this.longitude.toString());
这是我的parent.component.html。
<ngx-map (lon)="getLon($event)" (lat)="getLat($event)" ></ngx-map>
浏览 9提问于2019-11-16得票数 0
回答已采纳
<form [formGroup]="formularioedit" #formRegister="ngForm" (ngSubmit)=" updateMensaje()">
<select formControlName="subareas" *ngIf="!nomostrarsubarea" style="width:120px">
<option *ngFor="let opciones of subareas" [value]=
浏览 49提问于2020-05-02得票数 0
回答已采纳
3回答
我在我的Angular应用程序中使用了反应式表单。我想将数据绑定到类型为button的输入字段。我希望它的默认值是"testdata".i无法将数据绑定到输入字段。请给我引路。谢谢。 我正在尝试从API中获取数据，并使用formControlName在前端显示。 HTML <form [formGroup]='form'>
<div class="col-sm-3 form-group">
<input class='pl-2 ' nbInput fullWidth t
浏览 45提问于2020-06-24得票数 0
回答已采纳
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
我正在开发angular2应用程序，并使用角响应形式。如何获取最内部元素的值并设置其值。
form : FormGroup;
constructor(private formBuilder: FormBuilder)
{
this.form = formBuilder.group({
'home_cleaning' : [{
cities : FormBuilder.array([])
}]
});
}
setValue()
{
let cities_array = [1,2,3,4];
this.
浏览 9提问于2017-07-18得票数 12
回答已采纳
我有两个货币管道示例，一个直接使用视图上的管道，另一个使用来自ts代码端的管道。当我尝试提交表单数据时，与txtBox2相关的表单值不同，它添加了$ sign on模型数据。是否有可能在txtBox2上具有与txtBox1管道相同的行为？ <form class="form-horizontal" [formGroup]="testForm" (ngSubmit)="onSubmit()">
<input id="fullName" type="text" class="form
浏览 25提问于2020-09-11得票数 0
2回答
我是新的角，我正在通过角4学习材料初始化默认值，形成控制在创建FormGroup时。
当然，angular提供了SetValue()和patchValue()来初始化控制字段，我特别关注的是：
ngOnInit(): void {
this.customerForm = this.fb.group({
firstName : {value:'Naga',disabled:false},
lastName : {value:'R',disabled:false},
email : {value
浏览 21提问于2018-01-12得票数 0
我假设我是angular的新手。我正在尝试实现一个角度反应式表单，但我遇到了这个错误：“必须为表单控件提供一个值，名称为:目标。
这是我的组件和html的相关部分：
import { Component, Inject } from '@angular/core';
import { Http } from "@angular/http";
import { FormGroup, FormControl, FormBuilder, Validators } from "@angular/forms";
@Component({
sele
浏览 0提问于2018-06-27得票数 47
我用ngModel做了一个带有过滤管道的searchBox，它工作得很好。
但这一次，我想在反应式表单中使用该searchBox。它不工作，因为我在控制台中有一个大的红色错误。
ERROR Error:
ngModel cannot be used to register form controls with a parent formGroupName or formArrayName directive.
Option 1: Use formControlName instead of ngModel (reactive strategy):
<div [form
浏览 45提问于2021-02-23得票数 0
4回答
我有这样的东西
let formGroup = new FormGroup({
operationalAM: new FormGroup({
endTime: new FormControl('')
}),
operationalPM: new FormGroup({
startTime: new FormControl('')
})
});
我正试图像这样为endTime和startTime设置值
formGroup.controls.operationalAM.value.endTime.setValue('1300&
浏览 0提问于2019-12-25得票数 2
回答已采纳
1回答
我使用的是角9，我有一个复选框列表，在默认情况下，这些复选框需要设置为一些数据的列表。如果未选中其中一个复选框，则应显示某些数据。我遇到的问题是，当我未选中并尝试导航到另一个页面时，这些复选框保持未选中状态，这是我不想要的，因为默认情况下，当导航到新页时，这些复选框需要设置true如何保持默认状态，在从一个页导航到另一个页时，总是将复选框列表设置为true。
在我的孩子部分
public checkboxItems: CheckboxToggleGroupItem[] = [
{ label: 'outofservice', formControl: new For
浏览 2提问于2021-03-18得票数 0
回答已采纳
5回答
我对角质还不熟悉。实际上，我正在尝试从服务和数据中订阅数据，我正在传递给我的控件(例如，它就像一个编辑表单)。
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormArray, FormControl } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { QuestionS
浏览 0提问于2019-03-21得票数 101
回答已采纳
页面最初是作为模板驱动的表单编写的，但为了添加自动保存功能，正在转换为反应式表单。
在页面组件的构造函数中，我定义了reactive表单变量：
this.form = fb.group({
reviewer: '',
position: '',
officeName: '',
rows: fb.array([]),
comments1: '',
comments2: '',
comments3: ''
});
“行”是与此问题相关的字段。
在
浏览 0提问于2017-09-30得票数 6
回答已采纳
我在我的Angular应用程序中使用reactive form，我必须格式化选定的值并将其新值修补到该表单控件中。 我试图简单地订阅控件的值更改和补丁新值，但我得到了错误： Maximum call stack size exceeded 如何设置反应式表单控件的选定值的格式？ 下面是我的代码： this.ritiroForm.controls.quando.valueChanges.subscribe(() => {
const data = new Date(this.selectedOra).toLocaleString();
this.ritiroForm.get(&#
浏览 56提问于2020-09-25得票数 0
我在angular2中使用了反应式方法。
我有一个表单组。
return this.fb.group({
CreateDate:[''],
UpdateDate:['']
});
不需要输入CreateDate和UpdateDate。但是当我单击submit按钮时，我得到了这个错误：
core.umd.js:3010 Error: Must supply a value for form control with name: 'CreateDate'
当表单组值为空时
浏览 0提问于2016-11-17得票数 0
我有一个类似于下面的表单结构：
itemEntities: [
{customisable: [{food: {..}, quantity: 1}, {food: {..}, quantity: 5}]},
{customisable: [{food: {..}, quantity: 0}]},
]
我正在尝试使用新的量值来设置values /patchValue。我已经初始化值为0的数量。
但是，当我尝试传入一个像这样的变量时
this.toggleForm.controls.itemEntities.controls[i]
.controls.custo
浏览 0提问于2018-11-19得票数 0
1回答
我正在构建一个CRUD应用程序，其中从列表页面编辑链接是编辑:uid，当路由到编辑页面onInit时
Constuctor用户route.params获取id并进行rest调用
ngonInit按照预期的json创建表单结构。
在创建rest返回表单时，因此
this.form.setValue(json)；
json结构为as；
{
"id":"xxxxxx",
"address":"256",
"country":"United Kingdom",
"child&
浏览 0提问于2019-04-02得票数 0
1回答
我有一个表单，在这里我使用from数组：
private InitialFrom(): void {
this.addElectricMoneyFG = this.fromBuilder.group({
locales: this.fromBuilder.array([])
})
}
我有一个组件，它的输出值是这个值：
<multi-language-data-form
[selectLanguage]="selectLanguage"
[fields]="fields"
sticy="t
浏览 2提问于2020-07-26得票数 0
回答已采纳
1回答
我的嵌套表单目前以这种方式格式化：
ngOnInit() {
this.user = this.fb.group({
name: ['', [Validators.required, Validators.minLength(2)]],
quest1: ['', Validators.required],
account: this.fb.group({
email: ['', Validators.required],
confirm: ['', Validators.requ
浏览 1提问于2017-06-15得票数 10
回答已采纳
1回答
因此，我有一个(Angular 10)反应式表单，其中有许多输入组件，每个组件都是在ngFor循环中动态创建的： <div [id]="this.getDivElementId()" class="textinput dynControl" [formGroup]="this.parentFormRef" >
<input [name]="this.controlData.name" [id]="this.controlData.name" type="text" [at
浏览 17提问于2021-03-23得票数 0
回答已采纳
有一个窗体组，其中某些窗体控件值依赖于其他窗体控件值。在我的特殊情况下，它们也是相互依赖的，但为了简单起见，在下面的示例中没有显示这一点。
这是一个。
const fetchedFormValues = {
timestamp: '1504116487374'
};
Observable.from(this.form.get('timestamp').valueChanges)
.filter(v => v)
.distinctUntilChanged()
.subscribe(timestamp => {
console.log('
浏览 2提问于2017-08-30得票数 1
回答已采纳
很抱歉问这个问题。这与我的一个子组件有关，该组件在编写表单时拒绝空字符串。。
我有一个表单控件orderNo。当我试着去做
this.myForm.controls['orderNo'].setValue = '123';
它工作得很好，我的视图是用这个值更新的。
但问题是，我无法用空字符串或空字符串设置控件。不管我做什么
this.myForm.controls['orderNo'].setValue = null;
or
this.myForm.controls['orderNo'].setValue = ''
浏览 1提问于2017-08-21得票数 6
回答已采纳
此问题在开发人员控制台或Spring后端都没有错误。尝试使用反应式表单和patchValue编辑现有记录时，日期字段为空。 日期输入代码： <div class="p-field p-col">
<label for="dueDate">Due Date</label>
<p-calendar formControlName="dueDate" id="dueDate" showButtonBar="true" [showIcon]="true&#
浏览 13提问于2020-10-27得票数 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
回答已采纳
角响应形式setValue将字符串设置为数字输入类型，输入框为空但在控件中分配字符串值，所需验证无效。
我是表单控制器
ngOnInit() {
this.profileForm = new FormGroup({
name: new FormControl("", Validators.required),
age: new FormControl("", Validators.required),
}
}
patchAge(){
this.profileFo
浏览 9提问于2022-04-21得票数 0
如何从数据库中获取数据并将数据库中的数据设置为输入框
下面是我的一段代码
get服务
getStudentAddress() {
const id = sessionStorage.getItem('userId');
return this.http.get('http://localhost:8080' + '/student/' + id);
}
返回学生数据数组的getStudentAddress()，如下所示
在我的组件中，如何获取数据并将其放在一个输入框中，以便在页面打开时自动显示数据。
ngOnInit() {
/
浏览 0提问于2019-04-05得票数 0
回答已采纳
我在Angular2中有一个类似这样的表单：
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<input type="text" id="name" formControlName="name" value="{{elementToEdit?.name}}">
<button type="submit" [disabled]="!form.valid">Save</
浏览 0提问于2017-03-04得票数 1
回答已采纳
2回答
我正在学习角2中的反应性形式，我想知道是否可以一次绑定所有对象属性。我看到的每一个指南都显示了这样的东西：
this.form = this.fb.group({
name: ['', Validators.required],
event: this.fb.group({
title: ['', Validators.required],
location: ['', Validators.required]
})
});
然后设置这样的值：
this.form.setValue({
浏览 0提问于2017-08-24得票数 0
3回答
下面是我的代码，用于从服务获取响应。这里我得到了一份员工名单。
我需要根据服务的响应动态绑定表单控件，我的服务返回更多字段(EmployeeId、Name、Department等)。而不是窗体具有控件。如何跳过表单控件中不用到的内容？
this._employeeService.getEmployeeById(this.employeeId).subscribe((res: Response) => {
this.employeeForm.get('FileUploader').setValue(null);
for (const field in res) {
浏览 0提问于2018-06-29得票数 9
回答已采纳
1回答
如何设置类内的值(我们从服务器获得的类值的一部分)
我需要设置decisionStatusId的值，decisionStatusTypeName和结构描述如下：
结构1：
export interface ReviewRequestDecisionModel {
decision?: DecisionModel | undefined;
}
export interface DecisionModel {
decisionStatusTypeName?: string | undefined;
decisionStatusId?: number | undefined;
ac
浏览 4提问于2022-03-05得票数 0
1回答
角度10
我试图将角度日期范围过滤器的startDate和endDate都设置回null，但似乎在将startDate设置为null时，endDate会自动注入先前的值。
在下图中，this.selectedTimeFrame.startDate和.endDate一开始都是空的，但在运行this.filterGroup.get('startDate').setValue(null)之后，endDate不再是空的。
this.selectedTimeFrame = {
id: selectedTimeframe.id,
startDate: selectedTimef
浏览 23提问于2021-02-22得票数 0
我有一组FormControls (通过FormBuilder创建)：
this.someForm = this.fb.group({
name: '',
size: '',
price: '',
});
是否有其他方法从模型(在我们的示例someProduct中)更新它们：
let someProduct = {
name: 'shirt',
size: 'XL',
price: '20',
}
private updateForm(product
浏览 3提问于2017-06-21得票数 0
回答已采纳
1回答
我对角4很陌生，我试着学习角。下面是我关于角形式的问题，我正试图通过角4来开发这个表单。这个表单是只读的，是不可编辑的，我试图使用下面的服务将数据提取到表单中：
服务
getCatalogDetails(Catalogid:number):Observable<any>{
const headers = new HttpHeaders().set('Content-Type', 'application/json');
return this.http.get<Catalog>
浏览 2提问于2018-05-30得票数 1
在角13应用程序中，使用
<p-calendar [minDate]="today" [showIcon]="true" styleClass="form-control" showButtonBar="true"
dateFormat="dd/mm/yy" inputId="icon" placeholder="dd/mm/yy"
formContr
浏览 24提问于2021-12-19得票数 1
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
刚刚从Angular2 (我的代码可以正常工作)切换到Angular4。
我的一个单选按钮绑定了一个true值，但在呈现视图时，该单选按钮并未被选中。
代码的压缩版本如下所示：
我的组件：
// all relevant imports...
...
export class My Component{
public form: FormGroup = this.formBuilder.group({ prop1: ''});
constructor(private formBuilder: FormBuilder){
this.form.pa
浏览 3提问于2017-05-05得票数 0
我使用的是角5和反应性表单，mi表单是用后端提供的JSON动态创建的，有些特殊的输入是嵌套的3级，它很适合单选按钮，但是当输入是一组嵌套复选框时，补丁值不改变复选框的值，这是mi结构的一个例子。
this.cvForm = this._fb.group({
name: ['', [Validators.required]],
lastname: ['', [Validators.required]],
nested: this._fb.group({
level1: this._fb.group({
level2: this._
浏览 1提问于2018-12-03得票数 1
回答已采纳
我在输入类型date时遇到问题。我想从组件绑定数据。这是我的领域：
<div class="col-md-6">
<label for="dateOfReport">Data zgłoszenia błędu:</label>
<input type="date" formControlName="dateOfReport" id="dateOfReport" class="form-control" [value]="report.
浏览 0提问于2018-04-23得票数 1
1回答
我正在使用角形生成器来创建一个嵌套表单。如何在下面的代码中为quantity函数中的每个窗体组设置嵌套的表单updateValue()字段值。
ngOnInit() {
this.fastPostingForm = this.fb.group({
Charges: this.fb.array([
this.initCharge()
])
});
}
initCharge(){
return this.fb.group({
room: ['', Validators.required],
a
浏览 2提问于2017-10-02得票数 1
回答已采纳
我有一个角度驱动的模板形式，当我点击一个产品时，我想在它上填充值。字段'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
回答已采纳
我的HTML组件出了问题，出于某种原因，我的方法显示了一个错误:当我单击“编辑”按钮时，无法读取未定义的属性“setValue”，但是一切似乎都很好。
这是我的HTML
<div *ngFor="let item of currentUser.myExperiences" class="mt-3">
<div>
<h6>{{item.companyName}} <span *ngIf="item.currentlyWorking" class="badge ba
浏览 2提问于2020-03-16得票数 0
2回答
我正在尝试将disable设置为我的窗体，并想禁用该窗体。
不知何故，如果我设置value来形成它，它工作得很好，但是一旦我编写了disable方法，我的ng-select值就会输出。
有没有人在禁用带有值的ng-select时遇到过同样的问题？
form = new FormGroup({
code: new FormControl()
});
values = [{
value: "0"
label: "test1"
},
{
value: "1"
浏览 2提问于2020-10-30得票数 0
在我的反应性表单中，每当我保存数据时，我都会从服务器取回存储的对象。(原因是可能是服务器逻辑更改字段，然后需要将字段分发回客户机。)
onSave() {
const data = this.form.value;
console.log("saving", data);
this.service.save(data)
.subscribe(
suc => {
this.data = suc;
console.log("saving succeeded", suc);
},
浏览 3提问于2019-12-22得票数 0
我正在尝试用要编辑的模型中的数据填充表单输入字段。文本输入字段工作正常，但数字字段保持为空，直到我单击它们，有些数字字段直到我单击它们和所有之前的数字字段...导致此问题的原因可能是什么？下面是html： <form [formGroup]="servis.editCarFrom" style="width: 320px;">
<div class="form">
<div class="form">
<div>
浏览 20提问于2020-09-09得票数 0
我需要将反应性表单数组的特定窗体控件设置为值。我使用的方法如下：
(<FormArray>this.formGroup.get('test')).at(i).setValue(oldFr);
其中i是应该进行更改的索引，oldFr是要设置的值。
但我忘了每个索引中都有多个表单控件。我需要设置的表单控件称为formControlName="fr"。
我试过：
(this.formGroup.get('test')).at(i).controls'fr'.setValue(oldFr)；
但我犯了以下错误：
错误:必须为
浏览 0提问于2018-12-10得票数 0
回答已采纳
我有一个API请求返回JSON数组，如下所示： {
"address": {
"addressLine1": "499 Linden Boulevard",
"addressLine2": "Apt 4b",
"city": "Moraida",
"province": "Kansas",
"postalCode": "21763",
"country"
浏览 17提问于2021-02-04得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
