Ensuring the validity of a component is crucial. A valid component is defined by its unique brand, designation, type, reference, supplierId, and familyId. The challenge arises when one or more of these attributes are not unique. For example, if I'm editing the "type" field and then change the "reference" field to something else, the component remains invalid until I also update the "reference" field. How can I resolve this issue? Thank you for your assistance.
Below is my form setup:
this.componentDetailForm = new FormGroup({
familyId: new FormControl(0, {
validators: [Validators.required, Validators.min(1)],
asyncValidators: [this.uniqueComponentValidator.bind(this)]
}),
brand: new FormControl('', {
validators: [Validators.required],
asyncValidators: [this.uniqueComponentValidator.bind(this)]
}),
type: new FormControl('', {
validators: [Validators.required],
asyncValidators: [this.uniqueComponentValidator.bind(this)]
}),
designation: new FormControl('', {
validators: [Validators.required],
asyncValidators: [this.uniqueComponentValidator.bind(this)]
}),
case: new FormControl(''),
reference: new FormControl('', {
validators: [Validators.required],
asyncValidators: [this.uniqueComponentValidator.bind(this)]
}),
voltage: new FormControl(0, [Validators.required, Validators.min(0)]),
amperage: new FormControl(0, [Validators.required, Validators.min(0)]),
power: new FormControl(0, [Validators.required, Validators.min(0)]),
supplierId: new FormControl(0, {
validators: [Validators.required, Validators.min(1)],
asyncValidators: [this.uniqueComponentValidator.bind(this)]
}),
price: new FormControl(0, [Validators.required, Validators.min(0)]),
minimumQuantity: new FormControl(0, [Validators.required, Validators.min(0)]),
})
Below is the validator code:
private uniqueComponentValidator(control: AbstractControl): Observable<ValidationErrors | null> {
this.getFormValidationErrors();
this.component.brand = this.fc.brand.value;
this.component.designation = this.fc.designation.value;
this.component.type = this.fc.type.value;
this.component.reference = this.fc.reference.value;
this.component.supplierId = Number(this.fc.supplierId.value);
this.component.familyId = Number(this.fc.familyId.value);
return this.componentService.checkComponentIsUnique(this.component).pipe(map((data) => !data ? ({ componentExists: data }) : null));
}
Illustrating the problem visually, imagine I update the "Type" field last. The form remains invalid because the brand, designation, type, reference, supplierId, and familyId are not unique. Then, if I change the "Reference" field, the component should be valid, but it's not because the last modified field was "Type."