angular - 如何在Angular中将子FormGroup与父FormGroup结合起来
问题描述
我正在使用 angular8 创建客户,基本上创建客户需要客户详细信息和旅行详细信息。
所以我创建了一个 CreateCustomer 和行程组件,在里面创建客户注入行程组件。从行程组件中,我正在为行程创建一个表单组并在行程 html 中使用,并且每当行程表单发生变化时,我都会使用 Eventemitter 将行程表单发送给父级。
在客户组件中,我尝试添加该旅行表单组以提供输入以创建服务调用。当旅行发生变化时,我遇到了以下问题。
core.js:6185 ERROR TypeError: control.setParent is not a function
at FormGroup.registerControl (forms.js:5071)
at FormGroup.setControl (forms.js:5120)
这是我的父组件
export class CreateCustomerComponent implements OnInit {
constructor(private fb: FormBuilder, private createService: CreateService, private router: Router) {
}
customerForm = this.fb.group({
name: ['', Validators.required],
address: ['', Validators.required],
contact_name: [{value: '', disabled: true}, Validators.required],
contact_email: [{value: '', disabled: true}, Validators.required],
phone: [{value: '', disabled: true}]
});
//Here I am trying to add child form group to parent formgroup
tripFormChangeEvent (tripFormGroup: FormGroup) {
this.customerForm.addControl('trip',tripFormGroup);
}
onSubmit() {
this.createService.create(this.customerForm)
.subscribe(data => {
if (data["success"]) {
alert("Created Successfuly..!")
}
});
}
}
父 HTML,
<div class="col-sm-6 col-lg-3 form-group">
<label for="txtName">Customer</label>
<input type="text" id="txtName" class="form-control" formControlName="name" required>
<div class="invalid-feedback">
Required
</div>
</div>
<app-trip (onFormGroupChange)="tripFormChangeEvent($event)"></app-trip>
子组件
export class TripComponent implements OnInit {
@Output() onFormGroupChange = new EventEmitter<FormGroup>();
constructor(private fb: FormBuilder) { }
tripForm = this.fb.group({
name: ['', Validators.required],
cityStateZip: [''],
pickup_date: [''],
pickup_time: [''],
notes: ['']
})
ngOnInit() {
this.onValueChanges();
}
onValueChanges(): void {
this.tripForm.valueChanges.pipe( debounceTime(1000)).subscribe(val=>{
this.onFormGroupChange.emit(this.tripForm.value);
})
}
}
子 HTML,
<div class="border p-2 mb-2" [formGroup]="tripForm">
<legend class="w-auto small font-weight-bold">Trip NAme</legend>
<div class="form-row pb-sm-3">
<div class="col-sm-6 col-lg-3 form-group">
<label for="txtOrigName">Name</label>
<input type="text" id="txtOrigName" class="form-control" formControlName="name" required>
<div class="invalid-feedback">
Required
</div>
</div>
</div>
解决方案
这是您的解决方案,希望能解决
没有特定要求就不需要发出 Formgroup。在你的情况下,没有什么
在 Create 组件中创建您的旅行表单组
export class CreateCustomerComponent implements OnInit {
constructor(private fb: FormBuilder, private createService: CreateService, private router: Router) {
}
customerForm = this.fb.group({
name: ['', Validators.required],
address: ['', Validators.required],
contact_name: [{value: '', disabled: true}, Validators.required],
contact_email: [{value: '', disabled: true}, Validators.required],
phone: [{value: '', disabled: true}],
tripForm: this.fb.group({
name: ['', Validators.required],
cityStateZip: [''],
pickup_date: [''],
pickup_time: [''],
notes: ['']
}),
});
//Here I am trying to add child form group to parent formgroup
tripFormChangeEvent (tripFormGroup: FormGroup) {
this.customerForm.addControl('trip',tripFormGroup);
}
onSubmit() {
this.createService.create(this.customerForm)
.subscribe(data => {
if (data["success"]) {
alert("Created Successfuly..!")
}
});
}
}
父 HTML,
<div class="col-sm-6 col-lg-3 form-group">
<label for="txtName">Customer</label>
<input type="text" id="txtName" class="form-control" formControlName="name" required>
<div class="invalid-feedback">
Required
</div>
</div>
<app-trip [customerForm]="customerForm"></app-trip>
子组件
export class TripComponent implements OnInit {
@Input() customerForm : FormGroup;
constructor(private fb: FormBuilder) { }
ngOnInit() {
}
}
子 HTML,
<div class="border p-2 mb-2" [formGroup]="customerForm">
<legend class="w-auto small font-weight-bold">Trip NAme</legend>
<div class="form-row pb-sm-3" formGroupName="tripForm">
<div class="col-sm-6 col-lg-3 form-group">
<label for="txtOrigName">Name</label>
<input type="text" id="txtOrigName" class="form-control" formControlName="name" required>
<div class="invalid-feedback">
Required
</div>
</div>
</div>
推荐阅读
- python - 如何在 python 的 matplotlib 上为多重曲线图重新绘制一条曲线?
- python - Python - 查找图像中最常用的颜色 - 脚本似乎找到了不准确的颜色
- ruby-on-rails - 如何在继续控制器操作之前等待 Rails 服务响应?
- python - 当涉及无穷大值时,熊猫滚动返回 NaN
- php - WampServer突然这么慢,localhost不会加载
- oauth-2.0 - 现在不推荐使用密码授予的替代方法是什么?认证 2.0
- html - 如何在一行中有两个 div。右边和左边
- solr - solr WordDelimiterGraphFilterFactory,从数字中删除 0
- c# - EF Core 3.1 身份模型自定义 - 我做错了什么?
- amazon-dynamodb - 如何在 DynamoDB Step Function 任务的 ExpressionAttributeNames 部分中使用输入值?