I migrated my project to angular 11 and I noticed that the global validations that I added make FormBuilder.group deprecated with the message:
group is deprecated: This api is not typesafe and can result in issues with Closure Compiler renaming.
Use the `FormBuilder#group` overload with `AbstractControlOptions` instead.
so this is deprecated:
ingredientForm = this.fb.group({
ingredientType: ['', Validators.required],
ingredientFlavor: [''],
isMultiFlavor: [''],
ingredientBrand: [''],
ingredientName: [''],
imageFile: ['']
}, {validators: [ValidateThirdNumber.validate]});
and without the validators option it's not.
my ValidateThirdNumber validator:
class ValidateThirdNumber {
static validate(control: AbstractControl): void {
if (control) {
const isMultiFlavor = control.get('isMultiFlavor')?.value;
const ingredientFlavor = control.get('ingredientFlavor')?.value;
const ingredientBrand = control.get('ingredientBrand')?.value;
const ingredientName = control.get('ingredientName')?.value;
if (isMultiFlavor && ingredientFlavor.trim().length === 0) {
control.get('ingredientFlavor')?.setErrors({required_if: true});
} else {
control.get('ingredientFlavor')?.setErrors(null);
}
if (!ingredientFlavor && !ingredientBrand && !ingredientName) {
control.get('ingredientName')?.setErrors({required_at_least: true});
control.get('ingredientFlavor')?.setErrors({required_at_least: true});
control.get('ingredientBrand')?.setErrors({required_at_least: true});
} else {
control.get('ingredientName')?.setErrors(null);
control.get('ingredientFlavor')?.setErrors(null);
control.get('ingredientBrand')?.setErrors(null);
}
if (ingredientBrand && ingredientName && ingredientName === ingredientBrand) {
control.get('ingredientName')?.setErrors({not_the_same: true});
control.get('ingredientBrand')?.setErrors({not_the_same: true});
}
}
}
}
how do I overload it with AbstractControlOptions ?
I also receive same error, I make following changes.
make sure that your validator function signature matches like this. (A function that receives a control and synchronously returns a map of validation errors if present, otherwise null.)
and you can change code in the form builder like this.
and in the formbuilder object pass above formOptions object like this