I have in AngularJS a login form with a username and password input field. Above there is a button to load the register form. Then an email field will be added to the form.
But when I submit the register form, only the username and password input fields will be posted and not the email field.
Send Data after Login: {"username":"test","password":"test"}
Send Data after Register: {"username":"test","password":"test"}
Do you know why?
I created a Plnkr to demonstrate the problem:
http://embed.plnkr.co/HBEfITT3SNSZv44hj2x3/preview
Your additional field is inside an element with
ng-if="register"
ng-if is a directive that creates its own scope. So, when something is entered into the field <input ng-model="email" ...>, an email attribute is created and populated in the ng-if scope, instead of being created in the controller scope.
Rule of thumb: always have a dot in your ng-model, and always initialize the form model in the controller:
$scope.formModel = {};
<input ng-model="formModel.email" ...>
This will also make things simpler, since to post the form, all you'll have to do is something like
$http.post(url, $scope.formModel).then(...);
Related
I am very much new in angular js.I want to validate and post the form data using angular js on submit.I searched google but most of them was
disable the button on load ,after completing the form with valid data the button enable but I want to show error messages on form submit.
Here is My form snapshoot
I have tested with two text fields one is name and other is email but I want to proper messages for each fields e.g for email,phone no (valid format) and empty fields now I get only empty field message.
<span class="error-message"
ng-show="showMessage(frmReg.name)">
Please complete this field.</span>
var app=angular.module('regForm',[]);
app.controller('FormController',function($scope,$http){
$scope.frmRegField={};
$scope.frmSubmit=function(){
angular.forEach($scope.frmReg.$error.required, function(field) {
field.$setDirty();
});
// $http({
// method:"POST",
// url:"form_submit.php",
// data:$scope.frmRegField
// }).success(function(data){
// });
};
$scope.showMessage=function(input){
console.log(input.$$attr.name);
var show = input.$invalid && (input.$dirty || input.$touched);
return show;
};
});
You could use either class or state to do what you need
Input fields have the following states:
$untouched The field has not been touched yet
$touched The field has been touched
$pristine The field has not been modified yet
$dirty The field has been modified
$invalid The field content is not valid
$valid The field content is valid
They are all properties of the input field, and are either true or false.
Forms have the following states:
$pristine No fields have been modified yet
$dirty One or more have been modified
$invalid The form content is not valid
$valid The form content is valid
$submitted The form is submitted
The following classes are added to, or removed from, input fields:
ng-untouched The field has not been touched yet
ng-touched The field has been touched
ng-pristine The field has not been modified yet
ng-dirty The field has been modified
ng-valid The field content is valid
ng-invalid The field content is not valid
ng-valid-key One key for each validation. Example: ng-valid-required, useful when there are more than one thing that must be validated
ng-invalid-key Example: ng-invalid-required
The following classes are added to, or removed from, forms:
ng-pristine No fields has not been modified yet
ng-dirty One or more fields has been modified
ng-valid The form content is valid
ng-invalid The form content is not valid
ng-valid-key One key for each validation. Example: ng-valid-required, useful when there are more than one thing that must be validated
ng-invalid-key Example: ng-invalid-required
The classes are removed if the value they represent is false.
Give the form a name:
<form name="myForm">
And a name for the input to:
<input type="text" name="myName">
Then use ng-show/ng-if in your span:
<span class="error-message" ng-show="myForm.myName.$touched && myForm.myName.$invalid">
Please complete this field.
</span>
You can use ng-disabled to validate submit too:
<input type="submit" value="Submit" ng-disabled="myForm.$invalid">
Hope this helps. Good luck!
I have created dynamic form, here I want to send form data to controller. How can do this?
Here is plunker code link https://plnkr.co/edit/xmxDJHTPfJoSFwa2FWCB?p=preview
Issues:
when I change the value then element label also change.
How can I get the form data in product_submit function of controller.
All response appreciated.
Use
<input type="text"
id="module_module"
ng-model="getCol.value"
required="required"
class="form-control col-md-7 col-xs-12"
placeholder="Enter {{getCol.Field}}"
/>
Look here ng-model="getCol.value". You are using filed name as text field model value. Filed name and value are different. That is what you want I suppose.
You can access the values easily from your controller as $scope.getColumn[1].value. Change index or iterate accordingly.
Plunker here
To solve label issues, in your html, I changed ng-model expression to bound into getColumn.Value
In controller, I can read value entered in scope.getColumn[i].Value
I also updated code https://plnkr.co/edit/KlhAb69seMzHsLuhqweR?p=preview
I am new to AngularJS and i work Laravel. When i fill my input fields with Laravel form model binding, and i set ng-model="title" on input field, AngularJs clears populated input and sets it's value to '';
When i comment ng-model="title", field is populated.
on page load for few miliseconds input field is populated, and i think when AngularJS initializes $scope, input fields become empty.
I have not any controller in angular and when i add angular to page this problem appears.
How can i prevent angular from clear input fields, that are filled for edit action?
I found an good answer. we should set value, on input element via ng-init directive. so value will be accessible on scope and input filed will be populated:
<input ng-model="title" ng-init="title='{{ $title = $post->title }}'" value="{{ $title }}" type="text">
Now i use this solution.
I'm trying to build widgets directives that play well with forms
The complete example is available at http://jsfiddle.net/jy81bchd/4/
The main idea is:
Write your own form, put widget in it
<form name="otherForm" novalidate ng-init="model = {name: 'test'}" novalidate>
<swif-widget-text name="name" required="required" input-model="model.name">
<span translate>Name</span>
</swif-widget-text>
</form>
The widget directive copy all attributes to the input and transculde the contennt in the the label.
My differents problems are:
1) I can't update the formController of the main form, it doesn't find the different inputs throw directives. The best should be to use formcontrolller.addControl but I don't have succeed with it
2) To work around 1 I have tried to make each widget a different form. This is working execpt formcontroller doesn t update after link has been called (attributed copied to input doesn't affect the controller).
In the fiddle I copied required attribute to the input but if you empty the field it's still valid according to the formcontroller.
I have added name="input" also because if I copy name attribute to the input the form controller doesn't find any input.
Conclusion:
From what I understand formcontroller is initialized and loaded before the link is called.
How could I change that ?
There are several posts about how to create your own form component that plays nicely with the form and the controller that is attached to that.
For instance: http://blog.revolunet.com/blog/2013/11/28/create-resusable-angularjs-input-component/
Examining your fiddle I have a few things you need to look at:
1) add a name and a controller to the form element in order to work with all form elements that live inside of it. Via the $scope that is injected in that controller you can handle the form elements (also add meaningfull names to your form elements).
2) And your custom component:
- should use ng-model instead of input-model.
- should require 'ngModel' in the Directive definition
- in the link phase you get a reference to the ngModelController, and check the link above to see how you should interact with that to achieve a two way binding like behaviour. (using $viewValue, $render and $setViewValue)
Normally, with a form and input fields, the form controller is published into the related scope under the form name attribute. And, the NgModelController is published under the input name attribute.
So for an input field with an ngModel directive, the NgModelController for the input field can be retrieved like $scope.myFormName.myInputFieldName
The question is how to do the same thing (get the NgModelController) for input fields inside the ngRepeat directive?
I would like to name the input fields using $index as part of the name so each template instance is uniquely named. This renders OK, so
<input name="foo_{{$index}}" ...
renders the instance with $index == 3 to
<input name="foo_3" ...
But trying to get the ngModelController via the published names does not work (it's undefined), e.g.:
$scope.myFormName.foo_3
A plunker showing this is here: http://plnkr.co/edit/jYDhZfgC3Ud0fXUuP7To?p=preview
It shows successfully getting the ngModelController for a 'plain' input element and calling $setValidity, and also shows failing to get the ngModelController for an input element inside an ngRepeat directive.
Copied the relevant section of code from the plunker below:
<div ng-repeat="element in elements">
<div ng-class="{error: form['foo_{{$index}}'].$invalid}">
<input name="foo_{{$index}}" ng-model="element.a" type="number">
<span ng-show="form['foo_{{$index}}'].$error.bar">ngRepeat bar invalid</span>
</div>
</div>
{{form.foo_0.$setValidity('bar', false)}}
#Flek is correct that the new child scopes that ng-repeat creates are the root of the problem here. Since browsers do not allow nesting of <form> elements, ngForm must be used when nesting forms, or when you want to do form validation inside ngRepeat.
See Pawel's answer on the google group thread, which shows how to use ng-form to create inner forms, and/or #blesh's SO answer.
If i understand your question correctly, you are trying to have access to the form elements created inside the ng-repeat.
Please have a look at this fiddle http://jsfiddle.net/EF5Jp/. Inside the button click handler you will have the access to the element with id myForm.foo_2. You can notice that the element is retrieved by myForm.foo_2 and not $scope.myForm.foo_2. Second thing is, changing the value using its scope and not using its value property like angular.element(element).scope().foo = 6;.