I passed an array value in my view with $userdata.
In my view, there's a button there that will show a modal when triggered. This modal will show the user data using the $userdata variable.
Now, I used angular js for my form inputs.
For example:
div class="form-group">
<label for="company_name" class="col-sm-12 control-label">Company Name</label>
<div id="company_name" class="col-sm-12">
<input type="text" class="form-control" name="company_name" value="{{$userData['company']['name']}}" ng-model="user.company_name" ng-required="true">
</div>
<div class="col-sm-12">
<span ng-show="userForm.company_name.$error.required && userForm.company_name.$touched"><br> <small><i>Name field is required</i></small></span>
</div>
</div>
The problem here is the input is not showing any value.
Why so? But when I removed the ng-model and just used a plain input field, the value will be shown.
You have to remove value="..." from input, ng-model will control it. look at this example.
<input type="text" class="form-control" name="company_name" ng-model="user.company_name" ng-required="true">
Related
I'm new in AngulsrJS and I've got following code:
<form ng-if="editorCtrl.edit" class="form-horizontal" role="form" ng-submit="editorCtrl.saveEntry()">
<div class="form-group">
<div class="col-md-6" ng-repeat="(key,field) in editorCtrl.editEntry">
<label>{{key}}</label>
<input type="text" class="form-control" value={{field}} />
</div>
</div>
<!-- ng-model="editorCtrl.toSave[key]" ng-value="{{field}}" that part was in input attributes -->
<div class="form-group">
<div style="padding-left:110px">
<input type="submit" value="Update selected entry" ng-disabled="form.$invalid" class="btn btn-primary"/>
</div>
</div>
</form>
Now I need to obtain values from input fields. I tried to use ng-model="editorCtrl.toSave[key], but it's not working in a correct way.
Any suggestions how to resolve this situation ?
if you can consider no necesary the "toSave" object maybe you can use the 2-way data binding properly only using editEntry Object :
<input type="text" class="form-control" value={{field}} ng-model="editorCtrl.editEntry[key]"/>
In this way after a submit you will get editEntry with the fields modifieds (or not), here is an example
https://jsfiddle.net/pv8qrwty/1/
run the example and if you modified the fields after you press the submit button it will be displayed in your browser console
hope this help ! and sorry for my english !
There are two buttons, through which popup is opened,
I have input field in that popup and applied validations on that input field.
If I close the popup and clicks on second button then input value is already got filled, because I used same input field to reduce code.
How to reset that ng-model value of input field?
I tried to set it null on click of close button, but after clicking on second button it set null but shows valiation errors on first time.
How to achieve this functionality using same input field?
<form name="vm.pvtZipCodeSearchForm" id="pvtZipCodeSearchForm" class="clearfix">
<div class="alert alert-danger" ng-if="vm.errorMsg">{{vm.InvalidAddressError}}</div>
<fieldset class="form-control form-control-wrapper">
<div class="fields">
<input type="text" class="form-control" placeholder="{{vm.lang.tcZipCode}}Postnummer*" title="{{vm.lang.tcZipCode}}*" name="zipCode" maxlength="5" ng-model="vm.tariff.zipCode" ng-maxlength="5" ng-minlength="5" ng-required="!disable" />
<div ng-if="vm.isValidForm" class="error-message" ng-messages="vm.pvtZipCodeSearchForm.zipCode.$error" role="alert">
<div ng-message="required">{{vm.lang.errMsgBlankField}}</div>
<div ng-message="minlength">{{vm.lang.errMsgShortField}}</div>
<div ng-message="maxlength">{{vm.lang.errMsgLongField}}</div>
</div>
</div>
<br />
<div class="fields tac">
<button type="button" ng-click="vm.tcSearchZipCode()" class="tc___button--search">{{vm.lang.search}}</button>
</div>
</fieldset>
</form>
You can try setting
vm.pvtZipCodeSearchForm.zipCode.$pristine = true;
I have a form with an error field. Code is as follows:
<form name="myform" ng-submit="submit">
<input name="text" ng-model="username" required>
<div ng-messages="myform.username.$error">
<div ng-message="required">Field is required</div>
<div ng-message="has_spaces">Field must not contain spaces</div>
</div>
</form>
Is my logic of how ngMessages work correct? I tried setting "has_spaces" after the form is submitted but nothing works.
Your snippet is correct, except you need to access the form element for which you want to get errors by its name attribute and not the value of ng-model. I.e., instead of accessing myform.username.$error, you should access myform.text.$error. This snippet should do the job:
<form name="myform" ng-submit="submit">
<input name="text" ng-model="username" required>
<div ng-messages="myform.text.$error">
<div ng-message="required">Field is required</div>
<div ng-message="has_spaces">Field must not contain spaces</div>
</div>
</form>
Using ng-message, ng-maxlength, ng-minlength or any kind of validation in angular it use the name attribute instead of ng-model. So in your code you must use ng-messages = "myform.text.$error".
The problem is
you're referencing the model rather than the name of the input field itself in ng-messages.
You didn't define an input type. make type="text"
Renamed the input name to username, however in the model itself you should store it to an object IMO
I've corrected it below, try this instead
<form name="myform" ng-submit="submit">
<input name="username" type="text" ng-model="user.name" required>
<div ng-messages="myform.username.$error">
<div ng-message="required">Field is required</div>
<div ng-message="has_spaces">Field must not contain spaces</div>
</div>
</form>
I have a form with input texts that are looped in a ng-repeat.
For every input field there is a switch with which the user sets "Use default value" to YES/NO.
Every row of input fields are basically two fields, with one hidden one at a time, whether you want to show the default value (switch: YES, input text = disabled) or set a custom value (switch: NO)
I need each element to have a unique identifier to be able to save it on submit, for example **id="title_{{spec.id}}".
The switches work so that the switch-variable is used to create 2way binding, but it is the value of the checkbox within the Switch-DIV that will be saved to the database.
What I think I need to do is apply the spec.id value to the switch-variable="useDefaultValue_{{spec.id}}" and set the same value to the ng-show="useDefaultValue_{{spec.id}}" and ng-hide, but I don't know how to.
HTML:
<div class="row form-group" ng-repeat="spec in specsList">
<div class="col-xs-6 col-md-6">
<label for="specification_">{{spec.title}} <span ng-show="spec.unit.length">({{spec.unit}})</span></label>
<input class="form-control" type="text" name="title_{{spec.id}}" id="title_{{spec.id}}" placeholder="Not visible" ng-model="spec.value" ng-hide="useDefaultValue">
<input class="form-control" type="text" ng-model="spec.defaultValue" ng-show="useDefaultValue" disabled>
</div>
<div class="col-xs-6 col-md-6">
<label for="useDefaultValue_">Use default value</label> - {{spec.useDefaultValue}}<br />
<div class="switch" init-switch switch-variable="useDefaultValue">
<input type="checkbox" id="useDefaultValue_{{spec.id}}" name="useDefaultValue_{{spec.id}}" ng-model="spec.useDefaultValue">
</div>
</div>
</div>
Since your checkbox is backed by the row-dependent spec.defaultValue, you can come up with a simpler solution and don't need the switch. Just reference spec.useDefaultValue instead of your current useDefaultValue to directly access it.
<div class="row form-group" ng-repeat="spec in specsList">
<div class="col-xs-6 col-md-6">
<label for="specification_">{{spec.title}} <span ng-show="spec.unit.length">({{spec.unit}})</span></label>
<input class="form-control" type="text" name="title_{{spec.id}}" id="title_{{spec.id}}" placeholder="Not visible" ng-model="spec.value" ng-hide="spec.useDefaultValue">
<input class="form-control" type="text" name="title_{{spec.id}}" id="title_{{spec.id}}" ng-model="spec.defaultValue" ng-show="spec.useDefaultValue" disabled>
</div>
<div class="col-xs-6 col-md-6">
<label for="useDefaultValue_">Use default value</label> - {{spec.useDefaultValue}}<br />
<input type="checkbox" ng-model="spec.useDefaultValue">
</div>
</div>
As an aside, I would also use ng-if instead of ng-show and ng-hide to lighten the page and make the transitions smoother.
EDIT Submit function :
$scope.submit = function() {
angular.forEach(specsList, function(spec, index) {
if (spec.useDefaultValue) {
$scope.user[spec.title] = spec.defaultValue;
}
else {
$scope.user[spec.title] = spec.value;
}
});
User.save(user).$promise.then(function(persisted) {
// do some post-save cleanup
});
};
Of course, this is assuming you save spec values on the user. They could be stored somewhere else.
I'm having trouble getting a message to display when the field input is invalid. I can see the classes being correctly applied to the element i.e. ng-dirty ng-invalid ng-invalid-pattern so I just need to make the error message display. Is there an issue with my html?
Thanks!
<form ng-controller="FormCtrl" name="TestForm" action="http://myserver/api" method="post" novalidate>
<div class="form-group">
<input class="form-control" type="text" id="vld" name="vld" data-ng-pattern="/(^$)|(\b\d{9}\b)/" data-ng-model="model.tfn">
<span class="error" data-ng-show="model.tfn.$invalid">Correct input etc...</span>
</div>
</form>
The information you are looking for is part of the FormController. You need to setup a formController via ng-form directive:
<div class="form-group" ng-form="myForm">
<input class="form-control" type="text" id="vld" name="vld" data-ng-pattern="/(^$)|(\b\d{9}\b)/" data-mg-model="model.tfn">
<span class="error" data-ng-show="myForm.vld.$invalid">Correct input etc...</span>
</div>
If this is done you may access the information by [Name of the OFrmController].[Name of the input field].$invalid e.g. myForm.vld.$invalid