<form name="inputdata" ng-submit="saveStudentInfo(student)">
<div layout="row">
<md-input-container flex="50"> <label>First
Name</label> <input required name="studentFName"
ng-model="student.studentFName">
<div ng-messages="inputdata.studentFName.$error">
<div ng-message="required">This is required.</div>
</div>
</md-input-container>
<md-input-container flex="50"> <label>Middle
Name</label> <input name="studentMName" ng-model="student.studentMName">
</md-input-container>
<md-input-container flex="50"> <label>Last
Name</label> <input required name="studentLName"
ng-model="student.studentLName">
<div ng-messages="inputdata.studentLName.$error">
<div ng-message="required">This is required.</div>
</div>
</md-input-container>
</div>
</form>
That is the form components.
$scope.inputdata.$setPristine();
If I write this code inside the controller, it shows
$scope.inputdata.$setPristine is not a function.
Any suggestions ?? What should i do ?
Angular version 1.6.1
This method sets the form's $pristine state to true, the $dirty state to false, removes the ng-dirty class and adds the ng-pristine class. Additionally, it sets the $submitted state to false.
So, it doesn't work for individual form element. Do it for form instead.
You can't use $setPristine on an input.
It should be used on a form.
Related
i have to validate the text box which shows the error message when user enters 4 digit as 9999.so i have used the ng-pattern method to show error message but ng-pattern does n't allow to update the object.my code is given below:
<md-input-container class="" style="margin:5px 0px; margin-right:15px;">
<input type="password" name="numCode" ng-model="datas.part[1].Value" ng-value="datas.part[1].Value" maxlength="4" ng-pattern="/(?!9{4})\d{4}/" ng-keydown="vm.testCode(datas.part[1].Value)" class="ng-pristine ng-valid md-input ng-touched" aria-invalid="false" style="" autocomplete="off" required>
<div ng-messages="vm.formName.numCode.$error" class="allign-padding-bottom" role="alert">
<div ng-message-exp="['minlength','maxlength','pattern']">
{{::'testcode'|translate}}
</div>
</div>
</md-input-container>
vm.testCode= function (val) {
console.info("sdf",val);
vm.showConfirmUserCode = true;
///vm.isDeviceEnabled = false;
}
In ng-keydown method the model did n't update.it shows undefined in vm.formName.numCode.$viewvalue.kindly help me to sort out this problem & check my ng-pattern.if i remove my ng-pattern means i have the updated model
Please check this plunker:
http://plnkr.co/edit/g0wsbFnfi6TEW76orxIJ?p=preview
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<form name="form1" novalidate>
<input type="password" name="numCode" ng-model="inputText" ng-value="inputText" ng-pattern="/(?!9{4})\d{4}/" ng-maxlength="4" ng-keydown="testCode(inputText)" aria-invalid="false" style="" autocomplete="off" required>
<div ng-messages="form1.numCode.$error" role="alert">
<div ng-message="pattern">pattern error</div>
<div ng-message="maxlength">maxlength error</div>
<div ng-message="required">required error</div>
</div>
</form>
</body>
Have you referenced angular-messages as a seperate library? The ng-keydown works if its a valid text and the error messages are shown correctly.
Refer this codepen link
I have a simple form built using angular material. have referred angular material demo for this.
The fields are marked required and if the input is not made then a field required message is displayed. But the message doesn't vanish once a valid entry is made. Whereas, in the official demo this works.
This is the HTML code pertaining to the form:
<form name="myform">
<md-input-container flex="50">
<label>Name</label>
<input required name="name" ng-model="project.name">
<div ng-messages="myform.name.$error">
<div ng-message="required">This is required.</div>
</div>
</md-input-container>
<md-input-container class="md-block">
<label>Email</label>
<input required type="email" name="email" ng-model="project.email"
minlength="10" maxlength="100" ng-pattern="/^.+#.+\..+$/" />
<div ng-messages="myform.email.$error" role="alert">
<div ng-message-exp="['required', 'minlength', 'maxlength', 'pattern']">
Your email must be between 10 and 100 characters long and look like an e-mail address.
</div>
</div>
</md-input-container>
<md-button class="md-raised md-primary">Submit</md-button>
</form>
What could be the problem here?
You forgot to inject ngMessages to your app.
angular.module('BlankApp', ['ngMaterial', 'ngMessages']);
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.
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 have angularJS validation issue with below field , if i use ng-model its not making form $valid even the value is selected, So i used k-ng-model now this field is out of the validation scope, Any suggetion will be appreciated.
main.html
<div class="row">
<div class="form-group col-md-12">
<label for="themesList" class="required col-md-4">Themes:</label>
<div class="col-md-8">
<select class="multiselect" kendo-multi-select="themes"
k-options="challengThemesOptions" data-text-field="'text'"
data-value-field="'id'" name="themesList"
ng-model-options="{updateOn: 'blur'}"
k-ng-model="challengesDTO.themesKyList" required
id="themesList"></select>
<p class="text-danger" ng-show="addChallengeForm.themesList.$touched && addChallengeForm.themesList.$error.required">Theme(s) is required</p>
</div>
</div>
</div