[Post using Angular2 RC4 + @angular/forms module]
Imagine you want to validate a field using another one with the last angular2 form API. In fact you can’t do that directly in a custom field validator but a really simple way to do it exists and this is what i’m gonna show you there.
➜ The form API
Here are the three differents form elements in Angular2:
FormControl: A form entry, could be an
FormGroup: Composed of
FormArray, each item contained got a string identifier. It could be an entire form or a subform.
FormArray: Same as
FormGroupbut acts like an array (you can
removeAt), useful for dynamic length (add a list of urls for example).
Each of these elements inherits from
AbstractControl. And if you go check this abstract class, you will see it means all got these following properties:
valid> Boolean showing state of the control/group/array.
statusChanges> Observables to catch whatever changed in the control/group/array.
errors> A key/value object with all errors (if errors it is) on the control/group/array.
anybecause it is an object litteral for
FormGroup, an array for
FormArrayand anything for a
FormControl(string for a
asyncValidator> list of sync and async validators.
This module is awesome and allow to code complex things properly.
Like you can see,
FormGroup have a
validator property and this is the one to use to solve our problem.
➜ Slice our form
So create a subform containing only fields needed for your validation and add your custom validator as parameter like this:
Then create your main form including it:
Th HTML markup looks like this:
And finally, here is our custom validator accessing our 2
FormControl value to check if it fit well:
Here it is, we got our custom fields validation, the
specificValueInsideRange validator function will be called anytime something change inside
You can check this example in the following plunker: