Is there an ng-show expression I can use to only validate this textbox only when the submit button is clicked? Currently, it's displaying the error message while the user is typing into it.
<div ng-show="!vm.validEmployerCode && !form.EmployerCode.$error.required" class="errorMessage">
You have entered an invalid code
</div>
<div class="row">
<div class="col-xs-11">
<div class="form-group">
<label class="form-label" for="Code">Code</label>
<input ng-model="vm.code" name="Code" type="text" required id="Code" />
</div>
</div>
<div class="btn-group" role="group" aria-label="...">
<button type="submit" class="btn btn-success col-md-4">
Sign Up
</button>
</div>
</div>
You could check $submitted flag inside your form object, basically that will become a true once you submit the form. So you need to add form.$submitted inside ng-show directive.
Markup
<div ng-show="form.$submitted && !vm.validEmployerCode && !form.EmployerCode.$error.required"
class="errorMessage">
You have entered an invalid code
</div>
Related
This is the HTML file. There is no used in this. There are two buttons in this HTML. Using angularJS2( typescript )
<div class="visitor-entry form-group">
<!-- [ngClass]="{'validate':vName.errors && (vName.dirty || vName.touched)}"-->
<div class="ui-input-group">
<input #vName="ngModel" type="text" class="form-control" placeholder="Name*" name="visitorName" [(ngModel)]="visitorName">
<span class="input-bar"></span>
</div>
<div class="ui-input-group">
<input type="text" class="form-control" placeholder="Mobile" name="visitorMob" [(ngModel)]="visitorMob">
<span class="input-bar"></span>
</div>
<div class="add-btn-cont">
<button [disabled]="vName.errors" class="icon-btn" id="addVisitor" title="Add" (click)="addVisitor();"></button>
</div>
</div>
<div class="block search-add-list active">
<h6>Person Affected
<button class="icon-btn pull-right addNewBtn" title="Add New" data-toggle="modal" id="personAffectedBtn" (click)="addNewPerson(personAffectedCode)></button>
</h6>
</div>
Here I want to validate the visitorName field mandatory, and add the class [ngClass]="{'validate':vName.errors && (vName.dirty || vName.touched)}. . THis should be validated only for first button click.
But if I add required to visitorName field then it is validating for both the button clicks.
How can I solve this issue.
You can set the value of required on button click
<div class="visitor-entry form-group" >
<!-- [ngClass]="{'validate':vName.errors && (vName.dirty || vName.touched)}"-->
<div class="ui-input-group" >
<input #vName="ngModel" type="text" class="form-control" placeholder="Name*" name="visitorName" [(ngModel)]="visitorName" [ngClass]="{'validate':vName.errors && (vName.dirty || vName.touched)}" [required]="{{reqVal}}">
<span class="input-bar"></span>
</div>
<div class="ui-input-group">
<input type="text" class="form-control" placeholder="Mobile" name="visitorMob" [(ngModel)]="visitorMob">
<span class="input-bar"></span>
</div>
<div class="add-btn-cont">
<button [disabled]="vName.errors" class="icon-btn" id="addVisitor" title="Add" (click)="addVisitor();reqVal=false"></button>
</div>
</div>
<div class="block search-add-list active">
<h6>Person Affected
<button class="icon-btn pull-right addNewBtn" title="Add New" data-toggle="modal" id="personAffectedBtn" (click)="addNewPerson(personAffectedCode);reqVal=true"></button>
</h6>
</div>
I am using AngularJs. I have 2 div, which I am hiding and showing each other. Each div contains few controls, which I have set "required" validation on click of submit button. By default the div "createMenu" is shown. Below is the code used:
<div ng-controller="testController" ng-init="init()">
<form name="mainForm" id="createForm" ng-submit="mainForm.$valid && add()" novalidate="">
<div class="container" ng-show="createMenu">
<div class="row">
<div class="col-sm-2">
<label>Name :</label>
</div>
<div class="col-md-6 form-group">
<input type="text" maxlength="150" required="" ng- model="testName" name="testName" />
</div>
</div>
<span style="color:red" ng-show="submitted == true && mainForm.testName.$error.required">Name is required</span>
<br />
<input type="submit" value="Submit" ng-click="submitted=true" />
</div>
<div class="container" ng-show="copyView">
<div class="row">
<div class="col-sm-4">
<label class="control-label">New Name :</label>
</div>
<div class="col-sm-4">
<input type="text" required="" maxlength="150" class="form-control" ng-model="NewName" name="NewName" />
</div>
</div>
<span style="color:red" ng-show="submitted == true && mainForm.NewName.$error.required">New Name is required</span>
<input type="submit" value="Submit" ng-click="copydata()" />
</div>
The issue is: If I click on the submit button in the first div, the controls in the div "copyView" is also getting validated. When the first submit button is clicked, I want to validate the textbox available in the "createMenu" div only. when the "copyView" div is shown, than at that time, when the submit button inside that div is clicked, the "New Name" textbox should be validated.
How to differentiate between the two divs, when the error messages are shown.
Thanks
You can use separate form tag for the separate div tag.
like
<div ng-controller="name">
<form>
//first dive
</form>
<form>
//second div
</form>
</div>
I'm building a form using Angular 1.1.1 and Ionic.
There are many "wallets" and the user needs to send a new "value" to each of the wallet. My form has a validation for all fields which works fine when the 'submit' button for the form is pressed.
However, I also have a button next to each wallet to send only value to this wallet (not different values to all wallets). When I press it, all the validation errors appear, but I need error to be visible only for the particular wallet.
My form (index.html):
<form name="myForm" ng-submit="sendValues(wallets)" ng-controller="valuesCtrl" novalidate>
<div class="row" ng-repeat="wallet in wallets">
<div class="col item item-input-inset">
<label class="item-input-wrapper item-text-wrap">
<input name="wallet_{{wallet.id}}" type="number" ng-model="wallet.value" type="text" required/>
</label>
<span ng-show="myForm.wallet_{{wallet.id}}.$error.required">!!!</span>
</div>
<div class="col item">{{ wallet.previous }}</div>
<button ng-click="sendValue(wallet)">
<i class="ion-android-send"></i>
</button>
<span class=ng-show="myForm.$submitted==true && myForm.wallet_{{wallet.id}}.$error.required">Required</span>
</div>
<button class="button" type="submit">Submit</button>
</form>
My controller (values.js):
'Use Strict';
angular.module('App')
.controller('valuesCtrl', function($scope, $localStorage, UserService, $state) {
$scope.sendValues = function(wallets){
if ($scope.myForm.$valid) {
...
} else {
$scope.myForm.submitted = true;
}
},
$scope.sendValue = function(wallet){
if (wallet.value == null) {
$scope.myForm.submitted = true;
} else {
...
}
}
})
You need to create a form for each wallet
This is due to your html name attributes has same value inside ng-repeat
Use $index in your name field for differentiate all the name attribute.
<form name="myForm" ng-submit="sendValues(wallets)" ng-controller="valuesCtrl" novalidate>
<div class="row" ng-repeat="wallet in wallets">
<div class="col item item-input-inset">
<label class="item-input-wrapper item-text-wrap">
<input name="wallet_{{$index}}" type="number" ng-model="wallet.value" type="text" required/>
</label>
<span ng-show="myForm.wallet_{{wallet.id}}.$error.required">!!!</span>
</div>
<div class="col item">{{ wallet.previous }}</div>
<button ng-click="sendValue(wallet)">
<i class="ion-android-send"></i>
</button>
<span class=ng-show="myForm.$submitted==true && myForm.wallet_{{$index}}.$error.required">Required</span>
</div>
<button class="button" type="submit">Submit</button>
</form>
You have to create a form inside form again. But as per HTML standard you can not have nested form. But angular provided that ability to have nested form but the inner form should be ng-form. Which mean you are going to wrap form & inside that you can find multiple ng-form's.
So you should have ng-form="innerForm" which will keep track of each repeated form.
Other thing which I observed is, you did mistake while using ng-show(you had {{}} inside ng-show expression, which would not work). To fix it you could access object via its key like ng-show="innerForm['wallet_'+wallet.id].$error.required"
Markup
<form name="myForm" ng-submit="sendValues(wallets)" ng-controller="valuesCtrl" novalidate>
<div ng-form="innerForm" class="row" ng-repeat="wallet in wallets">
<div class="col item item-input-inset">
<label class="item-input-wrapper item-text-wrap">
<input name="wallet_{{wallet.id}}" type="number" ng-model="wallet.value" type="text" required/>
</label>
<span ng-show="innerForm['wallet_'+wallet.id].$error.required">!!!</span>
</div>
<div class="col item">{{ wallet.previous }}</div>
<button ng-click="sendValue(wallet)">
<i class="ion-android-send"></i>
</button>
<span class=ng-show="innerForm.$submitted==true && innerForm['wallet_'+wallet.id].$error.required">Required</span>
</div>
<button class="button" type="submit">Submit</button>
</form>
I have form on a dialog with some input field and a submit, a cancel buttons. I use ng-message for show input is wrong. But when i click cancel with ng-click="$dismiss()" for disable dialog then ng-message is show and action dismiss() is terminate. Some suggestion for me to resolve case
<form name="accountGroupForm" novalidate>
<div class="form-group"
>
<input id="group-name" class="form-control" name="groupName" placeholder="{{'Group name' | translate}}"
ng-model="accountGroup.name" ng-focus="true"
required>
<div ng-messages="accountGroupForm.groupName.$error" ng-if="accountGroupForm.groupName.$touched">
<div ng-message="required" class="help-block"><span translate>Group name is required</span></div>
</div>
</div>
<div class="wrapper row">
<div class="col-xs-6 text-right p-r-xs">
<button type="submit" class="hvr-grow btn btn-success w-sm"
ng-disabled="accountGroupForm.$invalid"
ng-click="submitAccountGroup()" translate>
Ok
</button>
</div>
<div class="col-xs-6 text-left p-l-xs">
<button class="hvr-grow btn btn-grey-blue w-sm" ng-click="$dismiss()" translate>Cancel
</button>
</div>
</div>
</form>
you can add an ng-if to the ng-message with its own variable then you can set that variable on the desired action. I usually set it on the form validations for $error and $dirty.
ng-show='myForm.inputBox.$dirty && myForm.inputBox.$error'
I have a form which is dynamically generating the fields, I am using ng-form for this. The form has an ng-repeat for input fields and the main form has a 'Save' button.
i.e when one of the input fields is dirty and has content, the save button should be enabled and should be disabled otherwise.
Here is my HTML Code :
<form class="form-horizontal" name="$parent.fSForm" novalidate ">
<fieldset class="form-group pl-sm" ng-repeat="fs in list track by $index">
<ng-form name="innerForm">
<div class="col-md-5">
<input type="text" class="form-control" autocomplete="off" name="fsl" ng-change="fileChanged()" ng-model="fs.path" placeholder="Add new here">
</div>
</ng-form>
</fieldset>
<a class="prop-toggle ng-binding" href="" ng-click="addNew()">Add More</a>
</form>
</div>
<div class="footer">
<span>
<button type="button" class="btn" ng-click="close()">Cancel</button>
</span>
<span>
<button type="submit" class="btn btn-primary" ng-click="save()" ng-disabled="fSForm.$error.fooname">Save</button>
</span>
</div>
So for my save button to be disabled when the form loads initially how should I go about validating that with an ng-form present? The save should be enabled when one of the input fields has some text in it. not sure how we can handle ng-disabled with ng-form within a form save button