![](/img/trans.png)
[英]How to set validaters for nested nested nested form controls of form groups in reactive forms in Angular 6
[英]Angular, how toget form array values from nested form groups
我需要在我的表單組中獲取值,我不知道我的 get 函數應該說什么 這是 TS 代碼
import { Component } from '@angular/core';
import { FormGroup, FormArray, FormBuilder } from '@angular/forms'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Nested FormArray Example Add Form Fields Dynamically';
empForm:FormGroup;
constructor(private fb:FormBuilder) {
this.empForm=this.fb.group({
employees: this.fb.array([]) ,
})
}
employees(): FormArray {
return this.empForm.get("employees") as FormArray
}
newEmployee(): FormGroup {
return this.fb.group({
firstName: '',
lastName: '',
skills:this.fb.array([])
})
}
addEmployee() {
console.log("Adding a employee");
this.employees().push(this.newEmployee());
}
removeEmployee(empIndex:number) {
this.employees().removeAt(empIndex);
}
employeeSkills(empIndex:number) : FormArray {
return this.employees().at(empIndex).get("skills") as FormArray
}
newSkill(): FormGroup {
return this.fb.group({
skill: '',
exp: '',
})
}
addEmployeeSkill(empIndex:number) {
this.employeeSkills(empIndex).push(this.newSkill());
}
removeEmployeeSkill(empIndex:number,skillIndex:number) {
this.employeeSkills(empIndex).removeAt(skillIndex);
}
onSubmit() {
console.log(this.empForm.value);
}
}
export class country {
id: string;
name: string;
constructor(id: string, name: string) {
this.id = id;
this.name = name;
}
}
模板
<h1>{{title}}</h1>
<form [formGroup]="empForm" (ngSubmit)="onSubmit()">
<div formArrayName="employees">
<div *ngFor="let employee of employees().controls; let empIndex=index">
<div [formGroupName]="empIndex" style="border: 1px solid blue; padding: 10px; width: 600px; margin: 5px;">
{{empIndex}}
First Name :
<input type="text" formControlName="firstName">
Last Name:
<input type="text" formControlName="lastName">
<button (click)="removeEmployee(empIndex)">Remove</button>
<div formArrayName="skills">
<div *ngFor="let skill of employeeSkills(empIndex).controls; let skillIndex=index">
<div [formGroupName]="skillIndex">
{{skillIndex}}
Skill :
<input type="text" formControlName="skill">
Exp:
<input type="text" formControlName="exp">
<button (click)="removeEmployeeSkill(empIndex,skillIndex)">Remove</button>
</div>
</div>
<button type="button" (click)="addEmployeeSkill(empIndex)">Add Skill</button>
</div>
</div>
</div>
</div>
<p>
<button type="submit">Submit</button>
</p>
</form>
<p>
<button type="button" (click)="addEmployee()">Add Employee</button>
</p>
這將技能值作為包含技能和經驗值的數組
employeeSkills(empIndex:number) : FormArray {
return this.employees().at(empIndex).get("skills") as FormArray
}
但是我需要技能和emp的值,有什么辦法可以得到嗎? 我已經嘗試過使用
employeeSkill(empIndex:number, empIndex2:number) : FormArray {
return this. employeeSkills(empIndex).at(empIndex2).get("skills") as FormArray
}
但它給了我錯誤說,cant get value of null
如果以下內容為您提供了一組您需要的值對,
employeeSkills(empIndex:number) : FormArray {
return this.employees().at(empIndex).get("skills") as FormArray
}
您可以解析數組並從中獲取值。
getEmployeeSkills(index: number){
const employee = this.empForm.value.employees[index]
if (employee === undefined) return null
return employee.skills.length ===0 ? null: employee.skills.map(skill => skill.skill)
}
我在這里為您構建了一個小示例: https : //stackblitz.com/edit/angular-3acuz7?file=src%2Fapp%2Fapp.component.ts
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.