Angular 2 Reactive Forms - Using ignorable fields

Question

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!

Are You passing form values like : this.form.getRawValue()

Mohit Saxena
– Mohit Saxena

2017-12-01 05:06:04 +00:00
Commented Dec 1, 2017 at 5:06 — Mohit Saxena
– Mohit Saxena, Commented Dec 1, 2017 at 5:06
No, this.form.value

molerat
– molerat

2017-12-01 23:21:28 +00:00
Commented Dec 1, 2017 at 23:21 — molerat
– molerat, Commented Dec 1, 2017 at 23:21

AVJT82 · Accepted Answer · 2017-12-02 07:36:06Z

2

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();

answered Dec 2, 2017 at 7:36

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

molerat Over a year ago

Perfect, that's exactly what I was looking for. Thank you.

AVJT82 Over a year ago

Great, glad to hear! :)

Collectives™ on Stack Overflow

Angular 2 Reactive Forms - Using ignorable fields

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related