I have a reactive form as following:
this.form = this.formBuilder.group({
name: ['', Validators.required],
email: ['', this.customValidator()]
});
I also have a "submit" button with a [disabled]
condition:
<button [disabled]="form.invalid" (click)="create()">Create</button>
If email
input is untouched and I modify name
input, customValidator
is not fired and Create
button enables despite the customValidator()
would return an error.
On the other hand, the name
control has a Validators.required
validation that is fired even if the input is untouched, which is the desired behaviour.
Example on stackblitz: I want the
name
has value on it even if
Please check this solution. Instead of abstratcontrol I've used FormControl which is much easier to handle. Also you can pass the parent-child param to the custom validator as seen on this example:
ngOnInit() {
this.form = this.formBuilder.group({
name: ['', Validators.required],
email: ['', this.customVal('name')], -> you can pass the value here
});
}
Please check the stackblitz for complete solution.
https://stackblitz.com/edit/angular-custom-validator-uhhicz?file=src/app/app.component.ts