如何解决角反应式FormForm-无法分配第二个FormGroup元素
我正在使用Reactive Forms和嵌套的FormArray。 我正在开发应用程序以显示具有多个地址的客户端。 FormArray应该保存多个地址并使用* ngFor我想向用户显示它们。
一切正常,但我无法将更多项目添加到FormArray(地址)中 即使我在数组中指定了2个元素,我仍然只分配了一个。
我的代码有什么问题?
address.component.ts
import { Component,OnInit } from '@angular/core';
import { ClientsService } from '../../../shared/clients.service';
import { FormArray } from '@angular/forms';
@Component({
selector: 'app-address',templateUrl: './address.component.html',styleUrls: ['./address.component.css']
})
export class AddressComponent implements OnInit {
constructor(public clientService: ClientsService) { }
get Addresses(): FormArray{
return <FormArray>this.clientService.clientForm.get('Addresses');
}
ngOnInit(): void {}
}
clients.service.ts
import { Injectable } from '@angular/core';
import { FormBuilder,FormGroup,FormArray } from '@angular/forms';
@Injectable({
providedIn: 'root'
})
export class ClientsService {
constructor(private fb: FormBuilder,private http: HttpClient) { }
clientForm = this.buildClientData();
initializeformGroup() {
this.clientForm.patchValue({
Id: 0,CompId: null,NIP: null,ClientRelation: '',CompanyName: '',BusinessType: '',UsName: '',Addresses: [{
Id: 0,Type: 'Company',Country: '',Wojewodztwo: '',Powiat: '',Gmina: 'testo',City: '',StreetName: '',StreetNo: '',ApartmentNo: '',PostalCode: '',PostalCity: ''
},{
Id: 1,Type: 'Accomodation',],Phone: '',Active: false,Debtor: false,Poa: '',PoaPayment: ''
});
console.log(this.clientForm);
}
buildClientData(): FormGroup {
return this.fb.group ({
Id: 0,Addresses: this.fb.array([this.buildClientAddress()]),PoaPayment: ''
});
}
buildClientAddress(): FormGroup {
return this.fb.group({
Id: null,Type: '',Gmina: '',PostalCity: ''
});
}
}
解决方法
您已将一个对象添加到buildClientAddress的表单组中。如果添加两组对象,则会得到另一组。
如果您希望动态地执行此操作,则必须在前端提供一些按钮,以便在该按钮操作下提供逻辑。
addItem(): void {
this.items = this.orderForm.get('items') as FormArray;
this.items.push(this.createItem());
}
createItem(): FormGroup {
return this.formBuilder.group({
name: '',description: '',price: ''
});
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。