Stack Overflow
Stack Overflow

Questions tagged [angular-reactive-forms]

Questions about Angular Reactive Forms, an Angular technique for creating forms in a reactive style. Use this tag for questions which are not specific to an individual version of Angular.

Angular offers two form-building technologies: reactive forms and template-driven forms. The two technologies belong to the @angular/forms library and share a common set of form control classes.

See the official guide for detailed introduction to Reactive Forms in Angular.

4678 questions
181
votes
20 answers

How to find the invalid controls in Angular(v2 onwards) reactive form

I have a reactive form in Angular like below: this.AddCustomerForm = this.formBuilder.group({ Firstname: ['', Validators.required], Lastname: ['', Validators.required], Email: ['', Validators.required,…
sa_
  • 2,854
  • 3
  • 22
  • 29
177
votes
15 answers

How to disable a input in angular2

In ts is_edit = true to disable... I just simply want to disable a input based on true or…
Tampa
  • 75,446
  • 119
  • 278
  • 425
148
votes
8 answers

How to get a single value from FormGroup

I am aware that I can get the values of a form using JSON.stringify(this.formName.value) However, I want to get a single value from the form. How do I go about doing that?
Stephen Romero
  • 2,812
  • 4
  • 25
  • 48
141
votes
7 answers

addControl to FormGroup dynamically in Angular

How can I add a FormControl to a FormGroup dynamically in Angular? For example, I would like to add a mandatory control which name is "new" and its default value is ''.
joeSmith
  • 1,445
  • 2
  • 8
  • 7
140
votes
8 answers

In Angular, how to add Validator to FormControl after control is created?

We have a component that has a dynamically built form. The code to add a control with validators might look like this: var c = new FormControl('', Validators.required); But let's say that I want to add 2nd Validator later. How can we accomplish…
melegant
  • 1,649
  • 2
  • 12
  • 15
135
votes
21 answers

Reactive Forms - mark fields as touched

I am having trouble finding out how to mark all form's fields as touched. The main problem is that if I do not touch fields and try to submit form - validation error in not shown up. I have placeholder for that piece of code in my controller. My…
Giedrius Kiršys
  • 5,154
  • 2
  • 20
  • 28
122
votes
4 answers

When to use FormGroup vs. FormArray?

FormGroup: A FormGroup aggregates the values of each child FormControl into one object, with each control name as the key. const form = new FormGroup({ first: new FormControl('Nancy', Validators.minLength(2)), last: new…
jcroll
  • 6,875
  • 9
  • 52
  • 66
121
votes
5 answers

How to set value to form control in Reactive Forms in Angular

I'm new to Angular. Actually, I'm trying to subscribe data from a service and that data, I'm passing to form control of mine from (example, it's like an edit form). import { Component, OnInit } from '@angular/core'; import { FormBuilder, FormGroup,…
sun
  • 1,832
  • 4
  • 19
  • 31
113
votes
14 answers

Angular 5 FormGroup reset doesn't reset validators

I have a form on my page and when I call FormGroup.reset() it sets the forms class to ng-pristine ng-untouched but FormControl.hasError(...) still returns truthy. What am I doing wrong here? Template
efarley
  • 8,371
  • 12
  • 42
  • 65
96
votes
5 answers

How to use formControlName and deal with nested formGroup?

As Angular documentation says we can use formControlName in our forms:

Hero Detail

FormControl in a FormGroup

smartmouse
  • 13,912
  • 34
  • 100
  • 166
93
votes
4 answers

TypeScript. FormGroup FormArray - remove only one element object by value. Angular 2 4

this.formGroup = this.formBuilder.group({ images: this.fb.array([]) }); I add new element in this way: this.images.push(new FormControl(new ImageCreateForm(this.imageResponse.id))); get images(): FormArray { return…
el_konrad
  • 1,211
  • 2
  • 11
  • 12
89
votes
7 answers

Set Form to Pristine without clearing data

I have a form that displays a list of elements. They all share a common save button which is disabled until the form becomes dirty. Then, once the user clicks the save button, the data will be submitted to the server. If the…
spectacularbob
  • 3,080
  • 2
  • 20
  • 41
82
votes
13 answers

Requiring a checkbox to be checked

I want a button to be disabled until a checkbox has been checked using a FormBuilder for Angular. I don't want to explicitly check the value of the checkbox and would prefer to use a validator so that I can simply check form.valid. In both…
nathasm
  • 2,524
  • 5
  • 24
  • 35
74
votes
3 answers

Angular 5 Reactive Forms - Radio Button Group

I have 2 radio buttons, I'm using reactive forms and I have added the form controls within my component. The issue I am facing is that the name attribute has to be the same as the formControlName. When I set the name attribute as the same, I can…
Taranjit Kang
  • 2,510
  • 3
  • 20
  • 40
72
votes
9 answers

How to use pipes in Angular 5 reactive form input

I am trying to figure out how to use a pipe within a reactive form so that the input is forced into a currency format. I have already created my own pipe for this which I have tested in other areas of the code so I know it works as a simple pipe. …
Dallas Caley
  • 5,367
  • 6
  • 40
  • 69
1
2 3
…
99 100