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();
Related
I'm starting to use model based forms in my angular App. So far I have been suing template based forms and I bind my data using [(ngModel)].
I noticed that using [(ngModel)] in reactive forms is possible, but I've been reading on stack that it's a bad practice, but I can't find (or missed) anything about this in the docs.
Is it true that you should avoid using when you are working with reactive forms? If so, what would be the correct way to bind data to an input?
Right now I do something like this:
My component:
this.assignForm = this.fb.group({
"balance": [null, Validators.required]
});
My Template
<input type="text" formControlName="balance" [(ngModel)]="myData.Balance" />
Every HTML input element is wrapped by an angular class called FormControl. FormBuilder creates the FormControls explicitly. Putting NgModel on a element will also create a FormControl.
In your example, you have two FormControl objects for the same element.
Assuming they don't fail due to name clash (like <input name="myname" formControlName="myname" [(ngModel)]="model.prop" /> would register myname with the FormGroup twice), then you might get different answers on valid/invalid/touched/dirty depending on which one was queried.
Your question title and question completely mix up model based and reactive, where your code uses them both combined. Using both combined results in absolutely no guarantee that the value you see and the value your form controller contains are equal. Just do not do it.
The correct way would be:
this.assignForm = this.fb.group({
"balance": [myData.Balance, Validators.required]
});
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?
I am trying to create a form element text with value in moodle.
I trying the below :
$mform->addElement('text','test', get_string('test'));
This is used to create a text box . i want to add value also like
<input type='text' value='<?php .... ?>' />
How to do that in moodle
When you instantiate the form, you can pass the relevant data into it, e.g.
$form = new my_form();
$formdata = (object)array('test' => 'The value to display in the textbox');
$form->set_data($formdata);
(Usually the data passed into the form is some existing data retrieved from the database).
I'm not sure what kind of data did you mean here.
If you want to set user data (for example, you are developing a form that edits existing record), then use $form->set_data() after creating a form instance as Davo suggested.
If you want to pre-fill the form with default value, then use this inside the form definition:
$mform->addElement('text','test', get_string('test'));
$mform->setDefault('test', 'your default value');
You can use both methods, in which case the data from set_data() will have priority.
I have a question about the wrappers/accordeons. I now have multiple wrappers and in each wrapper there is a form. Now, I want one sendbutton on the end of the page. The sendbutton which will send all the forms that have been filled in at once.
How can I do that?
I don't know why you want to break input into different forms and then submit them again at once. Would it not make sense to use one form and submit the data and process it the way you want using the processFormData hook? may be because you want the accordion to group you form fields. Let me help you this way:
Create your form in the format shown below. Make sure the form has a tabless layout to be able to use fieldsets.
Create a fieldset without a label. You may add the class ce_accordion just in case you have some styling attached to it.
Create a field of type html and add the following markup.
<div class="toggler">Form 1 headline here</div>
Create another field with the following markup
<div class="toggler">
Now create your input fields from here. for example a text field,textares.
Create a field of type html to close html markup created in step 3
</div>
Create a fieldset wrapper end here.
The above steps can be repeated as many as how many groups of fields you want to create in an accordion.
Now create you submit button here and it will send all your data the way you want.
Just a by the way:
If some one submits a form in a wrapper that is closed, how will he know which wrapper has error fields?
$(document).ready(function() {
$(".ce_accordion").each(function(index,el) {
if($(this).find("p.error")){
$(this).addClass("hasErrors");
$(this).find("div.toggler").addClass("active").attr("aria-expanded","true");
}
});
});
You can now add a style for .hasErrors rule
I'm looking for a way to have a button toggeling the field of my form. When "locking" the form with the toggle button no data can be typed. When "unlocking" data should be allowed to be typed. What I want to achieve with this is simple avoiding users to accidentally type.
I found the code below and it works. Only problem is that it only applies to one input field. I want it to work on more that one.
<input type="checkbox" id="yourBox">
<input type="text" id="yourText">
<script>
document.getElementById('yourBox').onchange = function() {
document.getElementById('yourText').disabled = this.checked;
};
</script>
Mark the fields you want to disable with a CSS class, and then use jQuery to disable them.
jQuery - Disable Form Fields
If you want a pure Javascript solution, just repeat this line
document.getElementById('yourText').disabled = this.checked;
for each field.
Or, you can do something like this this: How to Get Element By Class in JavaScript?. Note that you can assign multiple CSS classes to the same field, so assign another class to identify those fields that need to be disabled.