ng Fab Form not behaving nicely with material design (angular 1.5.8) tags.

[planktonlex55]

So, the ng Fab Form does not play nice with material design tags.
For example, when i have set the below in my controller,

 ngFabFormProvider.extendConfig({
                        globalFabFormDisable: true
                    });

and added my own validations, the error msg is aesthetic and nice to look at (in terms of font, size, etc.)

<md-input-container>
      <label>FirstName: </label>
      <input type = "text" name="userFirstName" ng-model="firstName" required ng-minlength="2" ng-maxlength="100">      
            <div ng-messages = "ccmPatientForm.userFirstName.$dirty && ccmPatientForm.userFirstName.$error" >
              <div ng-message="required">First Name is required.</div>
              <div ng-message="minlength">Minimum length is 2 chars.</div>
              <div ng-message="maxlength">Maximum length is 100 chars.</div>
            </div> 
</md-input-container>

See the first screenshot (uploaded as md-input-container.png). The error message is nice to look at now.

But, if I comment out globalFabFormDisable: true, the output looks like the second screenshot grab (uploaded as ng-fab-form.png), which is ugly.
I removed my explicit validations of minlength, maxlength, etc. but the default errors look n feel remained the same ugly types.

Is there anyway we can make ngFabForm behave similar to the aesthetic ouput (font, size, etc.) of tags?

I was able to achieve a temp. solution by adding an around the default template.
That fixed the big font size (of the errors) and brought it similar to the output in screenshot1 ( md-input-container.png), however the padding,etc. was still offbeat

PS: Just fyi. I am using the yeoman+gulp env.

If there is a workaround for this, then lemme know.

• plankton
  
  

[johannesjo]

Thanks for your report. My first attempt would be to use a custom validation-messages template and reproduce the working markup there. It is described in the README.md how to do this.