角度2: 在反应形式控件上迭代

小开

最佳答案

发现 Object.keys可以处理这个. 。

    Object.keys(this.form.controls).forEach(key => {
this.form.get(key).markAsDirty();
});

对于 Angular 8 + ，使用以下代码(基于米开朗基罗的答案) :

    Object.keys(this.form.controls).forEach(key => {
this.form.controls[key].markAsDirty();
});

小开

    Object.keys( this.registerForm.controls).forEach(key => {
this.registerForm.controls[key].markAsDirty();
});

小开

值得一提的是，还有另一种不用使用 Object.keys (...)魔法的方法:

for (const field in this.form.controls) { // 'field' is a string


const control = this.form.get(field); // 'control' is a FormControl


}

小开

使用@Marcos 答案，我创建了一个函数，可以将 formGroup 作为参数传递，它将每个 formGroup 子控件标记为 Dirty，只是为了让它在代码周围的更多地方可用，例如，将它放入服务中。

public touchAllFormFields(formGroup: FormGroup): void {
Object.keys(formGroup.controls).forEach((key) => {
formGroup.get(key).markAsDirty();
});
}

希望能有所帮助;)

小开

对于平面形式的结构，公认的答案是正确的，但不能完全回答原来的问题。一个网页可能需要嵌套的 FormGroup 和 FormArray，我们必须考虑到这一点，以创建一个健壮的解决方案。

public markControlsDirty(group: FormGroup | FormArray): void {
Object.keys(group.controls).forEach((key: string) => {
const abstractControl = group.controls[key];


if (abstractControl instanceof FormGroup || abstractControl instanceof FormArray) {
this.markControlsDirty(abstractControl);
} else {
abstractControl.markAsDirty();
}
});
}

小开

看起来 get函数不再适用于在角8中检索特定形式的值了，所以这就是我基于@Liviu Ilea 的答案解决它的方法。

for (const field in this.myForm.controls) { // 'field' is a string
console.log(this.myForm.controls[field].value);
}

小开

我创建这个函数来创建它 * 我有一个名为“ order”的控件，并将索引传递给他。

{"conditionGroups": [
{
"order": null,
"conditions": []
}
]
}




updateFormData() {
const control = <FormArray>this.form.controls['conditionGroups'];
control.value.map((x,index)=>{
x.order = index;
})

小开

这就是为我工作的东西

private markFormGroupTouched(formGroup: FormGroup) {
Object.keys(formGroup.controls).forEach((key) => {
const control = formGroup.controls[key];
control.markAsDirty();
if ((control instanceof FormGroup)) {
this.markFormGroupTouched(control);
}
});
}

小开

基于@Keenan Diggs 回答，我编写了一个通用函数来遍历一个平面或嵌套表单，它接受对每个表单控件执行的操作:

export function traverseForm(
form: FormGroup | FormArray,
fn: ((c: AbstractControl, name: string, path: string) => void),
initialPath: string = '') {
Object.keys(form.controls).forEach((key: string) => {
const abstractControl = form.controls[key];
const path = initialPath ? (initialPath + '.' + key) : key;
fn(abstractControl, key, path);
if (abstractControl instanceof FormGroup || abstractControl instanceof FormArray) {
traverseForm(abstractControl, fn, path);
}
});
}

这样使用:

const markAsDirty = (ctrl: AbstractControl) => {
if (!(abstractControl instanceof FormGroup) && !(abstractControl instanceof FormArray)) {
abstractControl.markAsDirty();
}
}
traverseForm(form, markAsDirty);

小开

在这里，是我的解决方案，你的问题，我正在使用一个索引的 for 循环，希望这有所帮助。

    for (const key of Object.keys(this.forms.controls)) {
this.forms.controls[key].markAsDirty();
}

小开

我正在寻找一个类似的解决方案，一个项目与多个表单有文件上传。我需要创建一个 Form Data 对象，并在多个页面中复制所有表单字段。这对角度11很有效。

const formData : FormData = new FormData();


Object.keys(this.staffForm.controls).forEach(key => {
console.log("Control Key => "+key);
console.log("Control Val => "+this.staffForm.controls[key].value);
formData.append(key, this.staffForm.controls[key].value);
});

小开

如果不想在窗体控件上循环，也可以使用这种方法..。

export class NewComponent implements OnInit {
@ViewChild(ClrForm) clrForm: ClrForm;


form: FormGroup;


constructor(private formBuilder: FormBuilder) {}


ngOnInit() {
this.buildForm();
}


onFormSubmit() {
if (this.form.invalid) {
this.clrForm.markAsDirty();
return;
}
}


private buildForm() {
this.form = this.formBuilder.group({
sender: [null, [Validators.required]],
sentAt: ['', [Validators.required]]
});
}
}

<form clrForm [formGroup]="form" (submit)="onFormSubmit()">
<div class="clr-form-control clr-row">
<label for="sender" class="clr-control-label clr-col-4">Sender</label>
<div class="clr-control-container clr-col-8">
<app-custom-form-control formControlName="sender"></app-custom-form-control>
</div>
</div>


<clr-date-container>
<label class="clr-col-4">Data wysłania</label>
<input
type="date"
class="clr-col-8"
clrDate
formControlName="sentAt"
/>
</clr-date-container>


<input type="submit" value="Save" />
</form>

小开

您可以使用 formGroup 的 _forEachChild()方法遍历 FormGroup 的子级。对于我来说，在嵌套的表单组中修补值是有效的。

this.myForm.myFormGroup._forEachChild( control => {
control.markAsDirty();
})

小开

迭代 formGroup控件以获取每个窗体控件的值的简单解决方案:


formGroup: FormGroup;


this.formGroup = this.formBuilder.group({
control1: new FormControl('value1'),
control2: new FormControl(`value2`),
control3: new FormControl('value3')
});


Object.keys(this.formGroup.controls).forEach(key => {
console.log(this.formGroup.controls[key].value)
});

//输出:

价值1

价值2

价值4