I have a form that works great. It's built with
#ViewChild('f') formData: NgForm; so that I can fully access to each input value.
I submit the form data like this:
this.postJobService.sendPost(this.formData.value)
and the object sent is
Object {groupDat: Object}
groupData:Object
category:"tags"
city:"Boston"
description:"Awesome article"
state:"MA"
title: "An article title"
...
Now for many reasons, including unit testing, how do you add new values to NgForm and or specifically formData.value.groupData object before I submit the form?
Related
Is it possible to add ignorable fields to Angular 2's reactive forms?
To simplify things, look at this Form:
this.form = new FormGroup({
subTasks: new FormArray([]),
});
Each subTask will be solved by the user and the solution is saved inside the FormArray.
Now in order to display the text of the different subTasks, I added a FormControl called "text" to each subTask. But when the user submits the form, I don't want the task text to be sent to the server along with the user input.
I know I could just not use it, or remove it programmatically before submitting, but I was wondering if there is a way to do it clean. Thanks!
What you could utilize is to disable the formfield text, which means that the field is not included in the form object, but you can still use it. Sample:
this.myForm = this.fb.group({
text: [{value:'text value', disabled: true}],
somethingElse: ['something else']
});
and in template:
<form [formGroup]="myForm">
<p>{{myForm.get('text').value}}</p>
<input formControlName="somethingElse">
</form>
If you want to inspect the whole form object, disabled fields included, you can use:
this.myForm.getRawValue();
I am building a multi-step application form with React. Having first built it with pure internal state I am now in the process of refactoring to Redux using redux-form.
Having used the example here as a basis: http://redux-form.com/5.2.5/#/examples/wizard?_k=oftw7a we have come a good way.
However the problem appears when i have two forms which are supposed to have the same value. During one of the pages i have a name field, that is supposed to be duplicated on the name field of the next page. The opposite should happen if you go back from the last page. Any tips to how this could be achieved?
Using the wizard, you are basically working with the exact same form that's split into multiple pieces. Ultimately it's the same form, because redux-form tracks them by name. It is how the library identifies the pieces of the same form - using the name.
form: 'wizard',
Here you can see that the exact same instance of the form will be shared throughout the pieces. fields work in a similar manner. Each field is defined as part of a form.
As long as you use the same field constants inside the fields object that you pass into the reduxForm function and as long as the value for form is the same, so that they use the same underlying form object, it should work for you just fine.
On one page you should pass in
export default reduxForm({
form: 'wizard',
fields : {
'fieldIWantOnBothPartsOfTheForm',
'someOtherFieldThatShouldOnlyBeHere',
},
...
And then on the other page:
export default reduxForm({
form: 'wizard',
fields : {
'fieldIWantOnBothPartsOfTheForm',
'thirdFieldHere',
},
...
Also, make sure you keep destroyOnUnmount equal to false if you want to navigate back-and-forth.
Hope that helps.
in my very first asp.net mvc4 project,i'm trying to apply some validation tests on my four forms in the same page.Each form allows me to create a different type of project in my table(dataBase),so i'm using the same model generated by entity framework and for validation i used a partial class having the same name of my generated model and i've inserted data annotation such as required with error messages.My problem is when i submit one form leaving a required field empty,the appropriate validation error message is shown for all my forms and not only the one i submitted.Please can someone tell me how can i solve this problem?
If you have a RequiredAttribute on (say) property Name and its null on postback, a validation error is added for that property. If you inspect the html generated for the form, you will see something like this (assuming your using #Html.ValidationMessageFor(m => m.Name)) which acts as a placeholder for any validation error message associated with Name
<span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span>
Note the ..data-valmsg-for="Name"... Since your rendering 4 identical forms using the same model which generates 4 inputs for property Name, there will be 4 corresponding validation errors.
Your approach in rendering 4 identical forms does not make sense since you can only post one back. I suggest you consider using a view model that includes a property for ProjectType and render a DropDownList so the user can select the project type. Then only one form is required, and when submitting, get the selected ProjectType and use this to make whatever decisions you need to save the data.
Just structure your View in this way :-
#using (Html.BeginForm("ActionName", "ControllerName", FormMethod.Post, new { #Id = "Form1" }))
{
..........
..........
<button type="submit">Update this stuff</button>
}
#using (Html.BeginForm("ActionName", "ControllerName", FormMethod.Post, new { #Id = "Form2" }))
{
..........
..........
<button type="submit">Update this stuff</button>
}
In above example when you submit "Form1" model validations associated with "Form1" will fire and same case for "Form2".
I have 2 Forms, which I am usingain another form to try and keep things DRY.
In this manner:
#Forms/my_form.php
$this->addSubForm(new Form_thisForm(), 'this form');
$this->addSubForm(new Form_thatForm(), 'that form');
//then i add 2 more elements a sort and order element
//then a submit
So in the view where the form is used, all the fields show from all forms included.
However when posting the form data only the fields from Form_thisForm() and the Form_myForm(), ie. the main form, are posting. Data or form element names are not posting from Form_thatForm().
The post only contains variables in the 1st subform and full form. Not the second subform.
I guess your Form_thisForm and Form_thatForm are inherited from Zend_Form, so they also have Form decorator (which basically wraps your subforms in <form> tag).
As a result you have nested <form> tags in your html and this is not valid.
You should inherit your subforms classes from Zend_Form_SubForm - it has no Form decorator by default.
So I have this use case:
I have a list of contacts on a page, and want to allow the user to add new ones to the list.
In order to add a contact, there is a form with two inputs which can be filled out and there is a button to send out the form.
This is pretty straight forward in Meteor. I bind the submit event to the form as in this snippet:
Template.contacts.events
'submit #new_contact': (event) ->
event.preventDefault()
firstName = $('#first_name').val()
lastName = $('#last_name').val()
Contacts.insert(firstName: firstName, lastName: lastName)
$('#new_contact input').val('') # Clear the inputs
So well, this is also pretty easy, but I don't like the idea of referencing specific ids in the form, getting them with JQuery and then inserting a new contact to the list. I also think this has to scale very badly, if the form had 20 fields, I'd have to search for 20 elements in the form, which doesn't seem very clean.
I'd like to know if there is a better way around this problem, like binding the form inputs to an object / collection so that it gets updated automatically when the user introduces data in the form and then only persisting it when the form gets submitted.
There is automatic support for this planned (I think), but in the meantime, you can probably get around most of your objections by using the template object:
Template.contact.events
'submit form.contact': (event, template) ->
firstName = template.find('input[name=first_name]').value
Alternatively, in the body of a event helper, this.currentTarget is the form itself.