在反应式表单中，我如何创建一个自定义验证器来验证formGroup的数组是否没有值

Question

我的意思是我有一个订单页面，它有一个动态订单项集合。我想要求用户在该数组中至少有一个项。我理解自定义验证器的简单用法，但在本例中，我验证的不是单个控件，而是一个数组。如何说"如果数组中没有值，则给出错误"？

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>

Answer 1

选项1

您可以使用required验证器来验证表单是否至少有一个元素

const group = this.fb.group({
id: [order.id],
isItPurchase: [order.isItPurchase],
orderItems: this.fb.array([], [Validators.required])
});

现在要获得如果数组没有值，您可以检查required验证器是否失败

const error = group.get('orderItems').hasError('required');  // True if form is empty

选项2

创建验证器功能

function formIsEmpty(control: FormArray) {
if (control.controls.length === 0) {
return { noValue: true}
}
return null;
}

在你的FormGroup中，你可以像一样使用它

const group = this.fb.group({
id: [order.id],
isItPurchase: [order.isItPurchase],
orderItems: this.fb.array([], [formIsEmpty])
});

并通过获取错误

group.get('orderItems').hasError('noValue');

Answer 2

也许你应该通过获得FormArray控件

get itemsFormArray(): FormArray {
return this.createFormGroup.get('orderItems') as FormArray;
}

然后在你的模板中使用它，也许它不起作用，或者不是你需要的，但我希望它能给你线索

<mat-error *ngIf="itemsFormArray.hasError('required')">
// ERROR MESSAGE               
</mat-error>