Mdl Textfield and native validity checking

This package is based on material design lite. So it tries to behave like the original material design lite implementation. With this a regular md-textfield has it's own validity checking based on the browser native validity state for input fields. If the input is not valid the css class is-invalid is set to the mdl-textfield and the ui is updated to mark this field as invalid. This works great for any simple use case. But with angular we have the possibility to create Reactive Forms with our complete own validity handling, which results in conflicts: the native code "thinks" the input is valid but the angular code knows it is not. To solve this problem you can disable the native validity check for each mdl-textfiled. Just add then attribute disableNativeValidityChecking. Now you have full control about the ui state of the mdl-textfield. See the following example. Here the css class is-invalid is added manually if our FormControl is invalid:

 <mdl-textfield
            [class.is-invalid]="email.invalid"
            label="Email"
            type="text"
            formControlName="email"
            disableNativeValidityChecking
            error-msg="Please provide a correct email!"
            ></mdl-textfield>

But may be this is a little bit verbose if you need to disable the native checking for each mdl-textfield. In this case you can disable the checking for all mdl-textfields of your app module. Just add the following Provider to your module configuration:

import { DISABLE_NATIVE_VALIDITY_CHECKING } from 'angular2-mdl';

providers:[
    {provide: DISABLE_NATIVE_VALIDITY_CHECKING, useValue: true}
]

After this you just need to write:

 <mdl-textfield
            [class.is-invalid]="email.invalid"
            label="Email"
            type="text"
            formControlName="email"
            error-msg="Please provide a correct email!"
            ></mdl-textfield>