Angular2 (rc.5) setting a form to invalid with a custom validator

Question

I am using a template-driven form with a custom validator on one of the fields :

<button type="button" (click)="myForm.submit()" [disabled]="!myForm.valid" class="btn">Save</button>
<form #myForm="ngForm" (ngSubmit)="submit()">
   ...
   <input type="text"
                 class="validate"
                 [(ngModel)]="myDate"
                 name="myDate"
                 ngControl="myDate"
                 myValidator/>
</form>

myValidator :

import { Directive, forwardRef } from '@angular/core'
import { NG_VALIDATORS, FormControl, Validator } from '@angular/forms'

function check(s: string) {
   ...
}

function customValidation() {
  return (c: FormControl) => {
    return check(c.value) ? null : {
      myValidator: false
    }
  }
}


@Directive({
  selector: '[myValidator ][ngModel],[myValidator ][formControl]',
  providers: [
    { provide: NG_VALIDATORS, useExisting: forwardRef(() => MyValidator), multi: true }
  ]
})
export class MyValidator implements Validator {

  validator: Function

  constructor() {
    this.validator = customValidation()
  }

  validate(c: FormControl) {
    return this.validator(c)
  }
}

Everything is working just fine on the field. The only issues comes when the validator set the field to invalid, the form isn't set to invalid and thus the save button isn't disabled. I can't exactly get why. I guess I forgot a link between the validator and the form.

I am using angular_forms 0.3.0

Here is a plunkr : http://plnkr.co/edit/qUKYGFNLyjh6mNiqYY5I?p=preview which really seems to work... (rc.4 though)

I have not yet since some of my dependencies (ng2-select by instance) are still not compatible in rc.6. So I am stuck in rc.5 for a few more days. Is there anything which seems odd in here ? — Scipion
– Scipion, Commented Sep 7, 2016 at 6:47
You could try in a Plunker. There were several changes and fixes related to forms. — Günter Zöchbauer
– Günter Zöchbauer, Commented Sep 7, 2016 at 6:48

jmachnik · Accepted Answer · 2016-09-07 06:50:53Z

3

I have put your code in plunkr.

http://plnkr.co/edit/qUKYGFNLyjh6mNiqYY5I?p=preview

And it works just fine. You might check with other parts of your code. Specifically I have my own check function.

function check(s: string) {
  if(s.length > 0){
    return true;
  }else{
    return false;
  }
}

Have you initialized the myDate value? If it's not initialized i got a valid form on start.

ngOnInit() {
    this.myDate = ''
  }

answered Sep 7, 2016 at 6:50

jmachnik

1,1209 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

jmachnik Over a year ago

Are there any differences between your code and plunkr?

Scipion Over a year ago

There is only one difference, which is that the plunkr has disableDeprecatedForms(), provideForms(), and I am using FormsModule

jmachnik Over a year ago

I now see that it is in RC4 maybe that's the reason.

Scipion Over a year ago

I tried it in rc.6 with angular_forms in 2.0.0 rc.6 and it worked as well. I am a bit confused.

Scipion Over a year ago

For the time being, is there any way to force a form to be invalid ?

|

Collectives™ on Stack Overflow

Angular2 (rc.5) setting a form to invalid with a custom validator

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related