Angular 如何使用反应形式将一个formArray嵌套到另一个formArray中
我有一个反应式表单,它使用数组并具有以下结构:Angular 如何使用反应形式将一个formArray嵌套到另一个formArray中,angular,Angular,我有一个反应式表单,它使用数组并具有以下结构: this.myForm = this.fb.group({ names: this.fb.array([ this.fb.group({ element_name: [null, [Validators.required]] }), this.fb.group({ element_name: [null, [Validators.required]] }), ]) 一切正常,执行相应的验证 我想在另一个文本字段中添加l
this.myForm = this.fb.group({
names: this.fb.array([
this.fb.group({ element_name: [null, [Validators.required]] }),
this.fb.group({ element_name: [null, [Validators.required]] }),
])
一切正常,执行相应的验证
我想在另一个文本字段中添加lastname
,并进行必要的验证,但我不知道如何适应图像中的类似内容:
我试着做一些类似于我对“name”
所做的事情,但没有出错。我能做什么
这是我的现场代码:
这是我的代码:
<form [formGroup]="myForm">
<div formArrayName="names">
<ng-container
*ngFor="let item of myForm.get('names').controls; let i=index">
<div [formGroupName]="i">
name <input type="text" class="form-control" id="element_name"
formControlName="element_name"
placeholder="insert name"
>
<!--lastname
<input type="text" class="form-control" id="element_lastname"
formControlName="element_lastname"
placeholder="insert last name"
>-->
</div>
</ng-container>
</div>
</form>
this.myForm = this.fb.group({
names: this.fb.array([
this.fb.group({ element_name: [null, [Validators.required]] }),
this.fb.group({ element_name: [null, [Validators.required]] }),
]),
lastname: this.fb.array([
this.fb.group({ element_name: [null, [Validators.required]] }),
this.fb.group({ element_name: [null, [Validators.required]] }),
])
})
名称
this.myForm=this.fb.group({
名称:this.fb.array([
this.fb.group({element_name:[null,[Validators.required]]]}),
this.fb.group({element_name:[null,[Validators.required]]]}),
]),
姓氏:this.fb.array([
this.fb.group({element_name:[null,[Validators.required]]]}),
this.fb.group({element_name:[null,[Validators.required]]]}),
])
})
您需要将姓氏添加到首个姓名的相同表单组中
this.myForm = this.fb.group({
names: this.fb.array([
this.fb.group({
element_name: [null, [Validators.required]],
element_lastname: [null, [Validators.required]]
}),
this.fb.group({
element_name: [null, [Validators.required]],
element_lastname: [null, [Validators.required]]
}),
]),
})
以及您的Html:
<form [formGroup]="myForm">
<div formArrayName="names">
<ng-container
*ngFor="let item of myForm.get('names').controls; let i=index">
<div [formGroupName]="i">
name <input type="text" class="form-control" id="element_name"
formControlName="element_name"
placeholder="insert name"
>
<input type="text" class="form-control" id="element_lastname"
formControlName="element_lastname"
placeholder="insert last name"
>
</div>
</ng-container>
</div>
</form>
名称
您需要将姓氏添加到首个姓名的相同表单组中
this.myForm = this.fb.group({
names: this.fb.array([
this.fb.group({
element_name: [null, [Validators.required]],
element_lastname: [null, [Validators.required]]
}),
this.fb.group({
element_name: [null, [Validators.required]],
element_lastname: [null, [Validators.required]]
}),
]),
})
以及您的Html:
<form [formGroup]="myForm">
<div formArrayName="names">
<ng-container
*ngFor="let item of myForm.get('names').controls; let i=index">
<div [formGroupName]="i">
name <input type="text" class="form-control" id="element_name"
formControlName="element_name"
placeholder="insert name"
>
<input type="text" class="form-control" id="element_lastname"
formControlName="element_lastname"
placeholder="insert last name"
>
</div>
</ng-container>
</div>
</form>
名称
我不理解您的确切需求,但要更清楚地使用解决方案使用表单数组和表单组(如此处所示)。我不理解您的确切需求,但要更清楚地使用解决方案使用表单数组和表单组(如此处所示)。。