I have this simple working form, but when I put this in a $mdDialog it doesn't disable the submit button anymore... it basically ignores the networktypeForm.$invalid Is this common or is there a fix for this?
<form name="networktypeForm" ng-submit="add()" novalidate role="form">
<div class="md-dialog-content">
<md-input-container md-no-float flex>
<label>Element type</label>
<input flex ng-model="type" name="networktype" type="text" required="">
<div ng-messages="networktypeForm.networktype.$error">
<div ng-message="required">This is required</div>
</div>
</md-input-container>
</div>
<md-dialog-actions layout="row">
<md-button type="submit" class="md-primary md-raised" ng-disabled="networktypeForm.$invalid">
Add
</md-button>
</md-dialog-actions>
</form>
your requireds should be like this required not required="" or required="required"
For those still looking at this, I had a similar issue and mine was solved by removing the "novalidate" attribute.
Related
I have tried every flex of every kind, layout-wrap, everything angular material I can think of.
I can't figure out how to make these inputs spaced out evenly.
I think the problem is
that every input is inside of an md-input-container and I can't put a md-datepicker inside of one because then it gives the user two lines for an input.
If someone could let me know how to space these out evenly it really would be awesome!
<form name="formData" action="http://localhost:3000/senddata" method="POST">
<md-input-container class="md-block" >
<label><i class="material-icons">face</i> Name</label>
<input type="text" name="name" ng-model="$ctrl.name"/>
</md-input-container>
<md-input-container class="md-block">
<label><i class="material-icons">explore</i> Zip Code</label>
<input required type="text" name="zipCode" ng-model="$ctrl.zipCode" ng-minlength="5" pattern="^\d{5}(?:[-\s]\d{4})?$"/>
<div ng-messages="formData.zipCode.$error" style="color:red;" role="alert">
<div ng-message="required">This field is required!</div>
<div ng-message="minlength">Minimum length is 5</div>
</div>
</md-input-container>
<md-datepicker ng-model="$ctrl.myDate" class="md-block md-datepicker-focused" md-placeholder="Enter date" required md-max-date="$ctrl.maxDate"></md-datepicker>
<md-input-container class="md-block">
<label><i class="material-icons">search</i> Search:</label>
<input type="text" name="search" ng-model="$ctrl.search" required/>
<div ng-messages="formData.search.$error" style="color:red" role="alert">
<div ng-message="required">This field is required!</div>
</div>
</md-input-container>
<md-button class="md-raised md-primary" ng-disabled="formData.$invalid" ng-click="$ctrl.getData()" style="float:right;">Submit
</md-button>
I know this is nearly two months old but wanted to let you know that this should be fixed in Angular Material 1.1.0, which was officially released 2016-08-14.
Datepicker didn't used to work well with md-input-container. If you're curious, you can also read the commit with the fix.
I don't know why but I can't seem to display the content of ng-message for 'required'. I'm new to this, so please excuse if I'm missing something obvious!!
If I try to display {{studentForm.fName.$error}} it says blank.
Btw this is my first question on stackoverflow :)
EDIT:
Use form tag instead of md-form.
Seems like md-form is not a valid tag.
Additionally md-auto-hide="false" might me required under ng-messages tag.
see : https://github.com/angular/material/issues/6767
<div layout="row">
<div layout="column">
<md-form ng-model="student" name="studentForm" flex="90%">
<div layout="column" layout-padding>
<md-input-container class="md-block" flex>
<label for="firstName">firstName</label>
<input type="text" ng-model="student.firstName" name="fName" placeholder="firstName" required></input>
</md-input-container>
<div ng-messages="studentForm.fName.$error" role="alert">
<div ng-message="required">Required!!</div>
</div>
<md-datepicker name="DOB" ng-model="student.DOB" md-placeholder="Enter DOB" required valid>Enter DOB</md-datepicker>
<div ng-messages="studentForm.DOB.$error" role="alert">
<div ng-message="valid">The entered value is not a date!</div>
<div ng-message="required">This date is required!</div>
</div>
</div>
<md-button ng-click="submit()">Send your message</md-button>
</md-form>
</div>
</div>
Use form tag instead of md-form. Seems like md-form is not a valid tag. Additionally md-auto-hide="false" might me required under ng-messages tag. see : https://github.com/angular/material/issues/6767
How Can I validate a form using Angular-material, I need two functionalities:
1) When click submit show error messages if required fields are empty.
2) Do not send post request(avoid submit) if form fields are not valid.
The next code avoid submit but it does not show error messages when clicking, only when cursor is going out of each input field.
<form name="userForm">
<md-input-container>
<input name="email" placeholder="Email" data-ng-model="vm.registerUserData.email" required />
<div ng-messages="userForm.email.$error" ng-if='userForm.myControl.$dirty'>
<div ng-message="required">This is required!</div>
</div>
</md-input-container>
<md-input-container>
<input name="Password" placeholder="Password" data-ng-model="vm.registerUserData.password" required />
<div ng-messages="userForm.Password.$error">
<div ng-message="required">This is required!</div>
</div>
</md-input-container>
<md-input-container>
<md-button id="registerUser" value="Register" class="md-raised md-primary" ng-click="userForm.$valid && vm.registerUser()" aria-label="login" ng-disabled="login.loginForm.$invalid()">
Create
</md-button>
</md-input-container>
</form>
You're missing 2 things.
First: add type="submit" to your md-button element.
Second: add novalidate to your form element:
Note that novalidate is used to disable browser's native form validation.
You should also consider using ng-submit on the form element instead of using ng-click on the button.
<form name="userForm" novalidate ng-submit="userForm.$valid && vm.registerUser()">
<md-input-container>
<input name="email" placeholder="Email" data-ng-model="vm.registerUserData.email" required />
<div ng-messages="userForm.email.$error" ng-if='userForm.myControl.$dirty'>
<div ng-message="required">This is required!</div>
</div>
</md-input-container>
<md-input-container>
<input name="Password" placeholder="Password" data-ng-model="vm.registerUserData.password" required />
<div ng-messages="userForm.Password.$error">
<div ng-message="required">This is required!</div>
</div>
</md-input-container>
<md-input-container>
<md-button type="submit" id="registerUser" value="Register" class="md-raised md-primary" aria-label="login" ng-disabled="login.loginForm.$invalid()">
Create
</md-button>
</md-input-container>
</form>
I'm having problem with designing simple form.
<div layout="column" ng-cloak>
<md-content class="md-padding">
<form name="search">
<md-input-container>
<label>From where?</label>
<input name="from" ng-model="from" required>
</md-input-container>
<md-input-container>
<label>To where?</label>
<input name="to" ng-model="to" required>
</md-input-container>
<md-datepicker ng-model="date" md-placeholder="When?" ng-required="true" required></md-datepicker>
<md-input-container>
<md-button class="md-raised md-primary">Search</md-button>
</md-input-container>
</form>
</md-content>
</div>
This is how it looks, I don't know am I doing something wrong? I'm new to this framework. I want all inputs to be aligned to same base line, and I wan't to add icons in front of text inputs.
There are known issues with input alignment at the moment. You would have to tweak some margins if you want to align it yourself.
https://github.com/angular/material/issues/6636
https://github.com/angular/material/issues/6219
You can get icons in the input containers by specifying a <md-icon>.
<md-input-container class="md-icon-float md-block">
<label>Name</label>
<md-icon md-svg-src="img/icons/ic_person_24px.svg" class="name"></md-icon>
<input ng-model="user.name" type="text">
</md-input-container>
Check the documentation for more input examples.
Your structure has only one md-content under the layout="column". To stack the md-input-container and md-datepicker items you would need to add layout="column" to the form tag <form name="search" layout="column">which is the tag that is the parent to the tags your want to stack in a column.
<div layout="column" ng-cloak>
<md-content class="md-padding">
<form name="search" layout="column">
<md-input-container>
<label>From where?</label>
<input name="from" ng-model="from" required>
</md-input-container>
<md-input-container>
<label>To where?</label>
<input name="to" ng-model="to" required>
</md-input-container>
<md-datepicker ng-model="date" md-placeholder="When?" ng-required="true" required></md-datepicker>
<md-input-container>
<md-button class="md-raised md-primary">Search</md-button>
</md-input-container>
</form>
</md-content>
</div>
I am working with angualar and angular material and I am trying to create something linke this -> http://gyazo.com/51b99edb716687f6096e4cff7d009e8d
but for some reason my image (logo) stretches over de width, this is what I have now -> http://gyazo.com/277f2bcf6b47861412d8e5df949d8313
I can't even seem to get it in the middle of the screen
If any one can help me out and get me going with this flex box model I would appreciate it
this is my code:
<div layout="row" flex layout-padding layout-fill layout-align="center center">
<div flex="40" flex-lg="50" flex-md="70" flex-sm="100">
<md-card>
<md-toolbar>
<div>
<div><img src="../images/logo.png" alt="Zazzle logo"></div>
<h1 class="md-headline">
Sign up
</h1>
</div>
</md-toolbar>
</md-card>
</div>
</div>
To center something add a div with layout="row" and within the div add a <span flex></span> before and after the div you are trying to center.
This is how I do it for my login page to center the input divs. I am still trying to learn myself, so I am not sure if it is the right way or not but you can surely try it:
<div layout="row">
<span flex></span>
<div class="well" flex='30'>
<form ng-submit="vm.login()" name="loginForm">
<md-input-container>
<label>Email</label>
<input type="text" ng-model="vm.email" required/>
<div ng-messages="loginForm.email.$error" ng-if='loginForm.email.$dirty'>
<div ng-message="required">This is required.</div>
</div>
</md-input-container>
<md-input-container>
<label>Password</label>
<input type="password" ng-model="vm.password"/>
</md-input-container>
<md-button type="submit" class="md-raised md-primary">Submit</md-button>
</form>
</div>
<span flex></span>
</div>
Hope this helps :)