I have scenario where I am changing the input text, i have multiple forms and one input within each form so i want to get the current form name whose input i am changing. how to do this in angular 2??
Below is my code for child component
<form #form1="NgForm" novalidate>
<input id="phoneNumber" type="text" placeholder="phoneNumber" class="validate"/>
</form>
<form #form2="NgForm" novalidate>
<input id="mobileNumber" type="text" placeholder="mobileNumber" class="validate"/>
</form>
Now suppose i am adding mobile number i want its form name. How to do this angular 2?? This is i want to access in parent component I am accessing the child component form using #ViewChildren and i am able to access the form manually but i want access dynamically with respect to the input i am accessing ..
In Angular you have two choices use dynamic forms or template driven forms,
your choice is dynamic forms using #form1="NgForm"
Angular dynamic-form
In your code you forgot the '[formControlName]' directive on the inputs, when you have those you can access the form from your component code like:
Component:
this.form1.valueChanges.subscribe(data => console.log('Form changes', data));
HTML:
<form #form2="NgForm" novalidate>
<input [formControlName]="mobileNumber" type="text" placeholder="mobileNumber" class="validate"/>
</form>
I am able to get the current form valid invalid in parent form by passing index as input to child form and emitting the same in parent form...
Related
I want to reset all the form fields on successful AMP form submission as I am allowing user for multiple data entry.
Manually I can do it by managing states of each field through amp-bind but I want to reset fields in one go. Is there any function like form.reset present which I can call on form submit success event?
You can use the clear action to reset all fields in a form:
<form id=myForm>
<input>
</form>
<button on="tap:myForm.clear">Clear inputs</button>
You can use submit-success.
<form id=myForm on=submit-success: myForm.clear>
<input name=name value= />
<button>Submit form</button>
</form>
Assuming that i have the following data in my params
params:[input:[1, 2, 3]]
And i have the following form in my Grails app
<div class="block1">
<label class="control-label">
<g:message code="input.label" default="Input"/>
</label>
<div class="controls">
<g:textField id="input1" name="input" value="${input}" readonly="${actionName != 'show' ? false : true}"/>
</div>
</div>
<div class="block2">
<label class="control-label">
<g:message code="input.label" default="Input"/>
</label>
<div class="controls">
<g:textField id="input2" name="input" value="${input}" readonly="${actionName != 'show' ? false : true}"/>
</div>
</div>
<div class="block3">
<label class="control-label">
<g:message code="input.label" default="Input"/>
</label>
<div class="controls">
<g:textField id="input3" name="input" value="${input}" readonly="${actionName != 'show' ? false : true}"/>
</div>
</div>
The form design above is correct, because in my form design, there will be several inputs of the same name (but each will be saved to the database under different primary keys) and it can be increases and decreases according to user selection.
Few questions using the above
How do i make it so that the value for input1 is params.input[0], input2 is params.input[1] and input3 is params.input[2] in the view? I can pass the model from controller without problem, but i couldn't distribute the value properly to each input on the form.
Is there any way to change the value ${input} dynamically? As in if i want to change the value to ${input[0]} or ${input[1]}
Can i automatically set the amount of block appended into the form using the g:each tag? Say like if from controller i want to set the rendering block amount to 3, so can i use the g:each tag to render the block 3 times in the form?
Thanks
The links are examples of how to use ajax/jquery to get values from a remote call and replace html element (divId) within a page - this divId could be the entire
<input type="text" name="input" value="newvalue"/>
upon triggering some form of call as above to get the new value.. in regards to
g:textField
yes it works like all other grails tags in the end they are transformed back to the correct HTML terminology...
The actual variable value is dynamic if you defined
<input name="existingvariable" value="${something}" ...
where something was a parameter from the given controller - and then you updated the call so
://YOURHOST:8080/yourapp/controller?existingvariable=newvalue
and refreshed or clicked this link which is what ajax would be doing for you doing a new call to either another controller to generate new values or same and passing new value to it and then grabbing data and pushing it back onto the divId ... (all in the background)
Groovy loading into divs
Grails - Select menu not rendering
I want my selects dropdowns to auto populate with Ajax in Grails website
The above are all related to using ajax to populate / update existing form elements
If you wish to update a live form with a new live value (non existant in DB) take a look at modaldynamix plugin. //github.com/vahidhedayati/modaldynamix
I encounter a problem when testing form validation with angularjs
According to angularjs form guide,
an input control that has the ngModel directive holds an instance of NgModelController. Such a control instance can be published as a property of the form instance using the name attribute on the input control.
I created test code at plunker, it all works fine untill I change the input name from
<input type="number" name="age" ng-model="user.age" max="100" required>
<p>{{form1.age.$error}}</p>
to
<input type="number" name="user[age]" ng-model="user.age" max="100" required>
<p>{{form1.user[age].$error}}</p>
Does this mean angular can not recognize array syntax in form input?
The problem for me is I want to keep the normal form submission flow and only use angular for form validation, so I need to keep form input as array to work with the backend form handling
It has nothing to do with Angular. It is a syntactic JS error.
If you want to reference a property named user[age], you should do it like this:
form1['user[age]'].$error
form1.user[age] is incorrectly interpreted as (form1.user)[age]
I want to create twitter bootstrap compliant form. According to the docs for Twitter Bootstrap v2.2.2 (the version included with web2py) the html should look like:
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Email">
</div>
</div>
...
I'm currently using SQLFORM which outputs html that doesn't really fit with this (even using formstyle='divs'). Besides I want my html output to be clean without web2py artifacts such as class="w2p_fl". So my thought is to use a custom form. However in doing this there would be a lot of repeated code. That is, the following would basically need to be repeated for each field.
{{=form.custom.begin}}
<div class="control-group">
{{=LABEL(form.custom.label['myfield'], _class='control-label',
_for='mytable_myfield')}}
<div class="controls">{{=form.custom.widget.myfield}}</div>
</div>
...
{{=form.custom.end}}
So how can I repeat the above unit of code so I could replace it with something like {{=bootstrap_field(db.mytable.myfield)}} or some other way to adhere to DRY?
What is the web2py way to do this? Create a view function? Pass a function in the dictionary returned by the controller? Create my own html helper? Create my own widget? Another way?
If you're using Bootstrap 2, you can just do:
form = SQLFORM(..., formstyle='bootstrap')
For Bootstrap 3 (or any other custom formstyle you'd like to create), the formstyle argument can be a function (or other callable) that produces the form DOM. The function will be passed the form and a fields object, which is a list of tuples, with each tuple containing a CSS id, label, input element, and (possibly empty) comment/help text. To get an idea of what such a function should look like, check out the one used for Bootstrap 2 forms.
In my Angular app I'm having a form bound to a model. The form does not have fields for all model properties.
When the user hits the submit button I want to post the form the traditional way, not as AJAX request (I have to deal with an already existing server side script).
That basically works if I add a action to the form. But it obviously only submits the form with its present fields as it is, not the whole model just like it's done when using the $http service.
And additionally it does not create name attributes.
How could I submit the form the old-school way with the full model data? Do I have to create the missing form fields on my own or is there a way to let Angular do that for me?
<script>
angular.module('foobar', []).controller('ContentCtrl', ['$scope', function($scope) {
$scope.content = {
'title': 'Foo',
'subtitle': 'Bar',
'text': 'desc' // this field is missing in the form itself and therefore is not submitted
};
}]);
</script>
<form action="http://postcatcher.in/catchers/521c6510429f840200000169" method="post" ng-controller="ContentCtrl">
<input type="text" name="est" ng-model="content.title" value="asdf">
<input type="text" ng-model="content.subtitle">
<button>submit</button>
see post result
</form>
Here's a plunker: http://plnkr.co/edit/5XYGH9hTe7cpchSFWbTK
Angular doesn't do anything special when you have a form with an action defined. It's pure html form submission with exactly the fields that are defined.
Normally you would use:
<input type="hidden" ng-model="content.desc">
but angular currently (1.2.0rc1) still doesn't support ng-model binding to hidden inputs.
The workaround is this:
<input type="text" name="text" ng-model="content.text" ng-hide="true">