angular - 在反应式表单中,如何创建一个自定义验证器来验证 formGroup 数组是否没有值?
问题描述
我的意思是我有一个包含动态订单项目集合的订单页面。我想要求用户在该数组中至少有一项。我了解自定义验证器的简单用法,但在这种情况下,我验证的不是单个控件,而是一个数组。我怎么说'如果数组中没有值则给出错误'?
createFormGroup(order: Order): FormGroup {
const group = this.fb.group({
id: [order.id],
isItPurchase: [order.isItPurchase],
orderItems: this.fb.array([])
});
order.orderItems.forEach(x => {
var formArray = group.controls.orderItems as FormArray;
formArray.push(this.createOrderItem(x));
});
return group;
}
createOrderItem(item: OrderItem): FormGroup {
const formGroup = this.fb.group({
id: [item.id],
name: [item.name, Validators.required],
unitPrice: [item.unitPrice, Validators.required],
units: [item.units, Validators.required]
});
return formGroup;
}
对于一个简单的情况,我会做类似的事情
// xxxValidator(control: AbstractControl): { [key: string]: boolean } | null {
// if (control.value === 'xxx') {
// return { 'xxxValidator': true }
// }
// return null;
// };
编辑1:
我更近了。我确定错误何时存在。但是我的模板是错误的。如何查看模板中的错误?
createFormGroup(order: Order): FormGroup {
const group = this.fb.group({
id: [order.id],
isItPurchase: [order.isItPurchase],
orderItems: this.fb.array([])
},
{ validators: [this.testValidation1] }
// { validators: [this.testValidation2] }
);
order.orderItems.forEach(x => {
var formArray = group.controls.orderItems as FormArray;
formArray.push(this.createOrderItem(x));
});
return group;
}
createOrderItem(item: OrderItem): FormGroup {
const formGroup = this.fb.group({
id: [item.id],
name: [item.name, Validators.required],
unitPrice: [item.unitPrice, Validators.required],
units: [item.units, Validators.required]
});
return formGroup;
}
testValidation1(form: FormGroup) {
if (form.value.orderItems.length === 0) {
return { valOrderItems: false };
}
return null;
}
<div>
<div *ngFor="let fg of orderItems.controls; let i=index">
<app-order-item-form [orderItemForm]="fg" (itemDeleted)="onItemDeleted(i)"></app-order-item-form>
</div>
<!-- <span *ngIf="orderForm.errors.valOrderItems"> Must be atleast one orderItem </span> -->
</div>
解决方案
也许您应该通过以下方式获取 FormArray 控件
get itemsFormArray(): FormArray {
return this.createFormGroup.get('orderItems') as FormArray;
}
然后在您的模板中使用它,也许它不起作用或不是您需要的,但我希望它能给您提供线索
<mat-error *ngIf="itemsFormArray.hasError('required')">
// ERROR MESSAGE
</mat-error>
推荐阅读
- ios - iOS:在自定义框架中条纹 Apple Pay
- google-cloud-firestore - 在 Firestore 中,如何忽略不需要的创建输入?
- python - Python与串行设备通信
- python - statsmodels.tsa.api-0.9.0 ZeroDivisionError:除以零
- command-line - Vlang cli 示例不能以直观的方式工作
- django - Django:如何在电子商务中获取总购物车项目
- google-api - Gmail API 错误 429 - 如何解决该错误?
- reactjs - 从 React fetch 访问 Phoenix Framework http 请求
- android - 无法在 Google Play 管理中心上传应用程序包
- ios - 命令 PhaseScriptExecution Flutter 错误