- objective-c - iOS 5 : Can you override UIAppearance customisations in specific classes?
- iphone - 如何将 CGFontRef 转换为 UIFont?
- ios - 以编程方式关闭标记的信息窗口 google maps iOS
- ios - Xcode 5 - 尝试验证存档时出现 "No application records were found"
无法将值修补到 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',
templateUrl: './container.component.html',
styleUrls: ['./container.component.css']
})
export class ContainerComponent implements OnInit {
studList: Student[] = [];
myform: FormGroup = new FormGroup({
firstName: new FormControl('', [Validators.required, Validators.minLength(4)]),
lastName: new FormControl(),
gender: new FormControl('male'),
dob: new FormControl(),
qualification: new FormControl(),
resultList: new FormArray([])
});
onSave() {
let stud: Student = new Student();
stud.firstName = this.myform.get('firstName').value;
stud.lastName = this.myform.get('lastName').value;
stud.gender = this.myform.get('gender').value;
stud.dob = this.myform.get('dob').value;
stud.qualification = this.myform.get('qualification').value;
this.studList.push(stud);
this.myform.controls.resultList.patchValue(this.studList);
console.log(JSON.stringify(this.studList));
}
ngOnInit() {
}
}
型号:
export class Student {
public firstName: String;
public lastName: string;
public gender: string;
public dob: string;
public qualification: string;
}
HTML:
<div class="container">
<h3>Striped Rows</h3>
<table class="table table-striped" formArrayName="resultList">
<thead>
<tr>
<th>Firstname</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of myform.controls.resultList.controls; let i = index" [formGroupName]="i">
<td><p formControlName="firstName"></p></td>
</tr>
</tbody>
</table>
</div>
this.studList JSON:
[
{
"firstName":"santosh",
"lastName":"jadi",
"gender":"male",
"dob":"2018-03-31T18:30:00.000Z",
"qualification":"BE"
},
{
"firstName":"santosh",
"lastName":"jadi",
"gender":"male",
"dob":"2018-03-31T18:30:00.000Z",
"qualification":"BE"
}
]
最佳答案
根据你的问题,你想添加新的Student
至 resultList
.首先你要知道FormArray
是 AbstractControl 的数组。您可以添加 到仅AbstractControl 类型的数组,不能是其他类型。为了简化任务,更喜欢使用 FormBuilder
:
constructor(private fb: FormBuilder) {}
createForm() {
this.myform = this.fb.group({
firstName: ['', [Validators.required, Validators.minLength(4)]],
lastName: [],
gender: ['male'],
dob: [],
qualification: [],
resultList: new FormArray([])
});
}
正如您在填充resultList 之前看到的那样FormArray
, 它被映射到 FormGroup:
onSave() {
let stud: Student = new Student();
stud.firstName = 'Hello';
stud.lastName = 'World';
stud.qualification = 'SD';
this.studList.push(stud);
let studFg = this.fb.group({
firstName: [stud.firstName, [Validators.required, Validators.minLength(4)]],
lastName: [stud.lastName],
gender: [stud.gender],
dob: [stud.dob],
qualification: [stud.qualification],
})
let formArray = this.myform.controls['resultList'] as FormArray;
formArray.push(studFg);
console.log(formArray.value)
}
FormBuilder - Creates an AbstractControl from a user-specified configuration.
It is essentially syntactic sugar that shortens the new FormGroup(), new FormControl(), and new FormArray() boilerplate that can build up in larger forms.
此外,在 html 中 formControlName 绑定(bind)到 <p>
元素,它不是一个输入,你不能绑定(bind)到不形成 div/p/span...这样的元素:
<tbody>
<tr *ngFor="let item of myform.controls.resultList.controls; let i = index" [formGroupName]="i">
<td><p formControlName="firstName"></p></td> <==== Wrong element
</tr>
</tbody>
所以,我认为您只想在表格中显示添加的学生。然后迭代 studList 并在表中显示它的值:
<tbody>
<tr *ngFor="let item of studList; let i = index" [formGroupName]=i>
<td>
<p> {{item.firstName}} </p>
</td>
</tr>
</tbody>
修补阵列时要小心。因为patchValue FormArray 由 index 修补值:
patchValue(value: any[], options: {onlySelf?: boolean, emitEvent?: boolean} = {}): void {
value.forEach((newValue: any, index: number) => {
if (this.at(index)) {
this.at(index).patchValue(newValue, {onlySelf: true, emitEvent: options.emitEvent});
}
});
this.updateValueAndValidity(options);
}
因此,下面的代码修补了 index=0 处的元素:第一个索引值 this.myform.controls['resultList'] as FormArray
将替换为:
let stud1 = new Student();
stud1.firstName = 'FirstName';
stud1.lastName = 'LastName';
stud1.qualification = 'FFF';
formArray.patchValue([stud1]);
您的案例不适用,因为 patchValue 需要数组中的一些控件。在您的情况下,数组中没有控件。查看源代码。
关于javascript - 无法将数据修补到 FormArray,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49715887/
这是我想要完成的: 在一个页面中,用户将能够上传他们对某些外汇对的保护。因此,用户可以选择不同的时间范围来上传他们的图像分析。我的表格很简单: dataForm: FormGroup; this.da
我不知道如何重置 FormArray 的单个字段,例如: myForm = this.fb.group( { title: ["", [Validators.r
我正在尝试在 formarray 中实现 formarray 但它不起作用,下面也尝试过但不起作用。 How to get FormArrayName when the FormArray is ne
我用 ControlValueAccessor 构建了一个自定义输入组件,它非常适合添加标签作为选择。 ( Stackblitz ) 我的问题是: 当我在表单中实现组件时(城市和州控件) 通过选择一些
我认为这可能是响应式(Reactive)表单的一个错误。如果有经验丰富的 Angular 专家提供帮助,我将不胜感激。 症状:无法在给定时间输入超过 1 个字符。 出现情况:当输入是 FormArra
如何解决下面提到的错误: Type 'FormArray' is not assignable to type 'any[]'. Property 'includes' is missing in t
我有一个表单,其中一个控件是 formGroups 的 formArray。我将自定义验证器设置为 formGroups 中的一些控件。验证器工作正常,如果我在某些控件无效时检查 formArray
我想在表单中添加自定义验证器,以防止 mat-step 切换到下一步。当我使用 FormGroups 时一切正常,但当我必须使用 FormArray 时无法实现验证。 我已经尝试了至少两种在表单初始化
我想要多条错误消息,但不知道该怎么做......?在这里,我需要分别验证每个步骤,这就是我使用此步进器的原因 Em
我已经实现了一个 stackblitz,您可以在其中使用一些配置创建一个动态表单。一切正常,直到您使用 FormArray .什么想法?基本上,您的配置文件中可以有许多不同类型的字段。例如 check
我想用 FormArray 创建一个可编辑的表格。 为此,我有 results在表中呈现的属性。 用 FormArray 数据初始化它的正确方法是什么? results: Array; tableFo
我有一个动态大小的项目。对于每个我想生成一个复选框的项目。 我认为最好的方法是使用 FormArray。 但是我无法设置任何其他属性来指定动态复选框的标签。 items: Array = ['Bana
已关闭。此问题需要 debugging details 。目前不接受答案。 编辑问题以包含 desired behavior, a specific problem or error, and the
这是我的表单组: this.productGroup = this.fb.group({ name: ['', Validators.compose([Validators.required, V
我在 Angular 6 中使用了响应式(Reactive)形式。这种响应式(Reactive)形式包含一个名为 instruments 的 FormGroup,它是一个 FormArray。 我收到
我的 Angular 5/Angular Material 应用程序中有这个 FormArray: this.form = new FormGroup({ customerNumberC
我有一个 PhoneNumbersFormComponent 其模板如下所示: 我想通过 angular-cli 的 ng g component
我用 angular2 和 typescript 构建了一个表单。我尝试动态添加复选框列表,但它对我不起作用,我的错误在哪里? 模板代码:
我有在 FormBuilder 的帮助下构建的 Angular 表单。 Form 包含一个 FormArray,它具有用户想要的任意多的字段。我已经为字段设置了验证器 this.fb.array([t
我创建了一个自定义验证器来验证我的 FormArray 中的唯一性。当特定的值已经在数组中时,我想显示错误。 问题是它没有按预期工作。 实际行为: 重现步骤: 添加 3 个“输入”- 地址; 填写输入
我是一名优秀的程序员,十分优秀!