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.

3556 questions
145
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
  • 62,379
  • 105
  • 250
  • 388
110
votes
15 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,074
  • 3
  • 18
  • 27
102
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
  • 5,956
  • 8
  • 44
  • 59
99
votes
19 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…
98
votes
6 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,199
  • 1
  • 7
  • 14
91
votes
4 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
  • 945
  • 1
  • 6
  • 7
87
votes
15 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
  • 6,781
  • 8
  • 36
  • 61
66
votes
3 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…
user7337867
  • 921
  • 2
  • 9
  • 12
64
votes
4 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
  • 11,808
  • 26
  • 77
  • 154
64
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
  • 2,719
  • 2
  • 18
  • 36
63
votes
12 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,314
  • 5
  • 21
  • 33
60
votes
6 answers

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

Hi Everyone 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,…
sun
  • 1,202
  • 3
  • 14
  • 29
57
votes
7 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
  • 4,027
  • 5
  • 33
  • 53
52
votes
5 answers

angular 6 warning for using formControlName and ngModel

I recently upgraded the angular version to 6-rc. I got following warning It looks like you're using ngModel on the same form field as formControlName. Support for using the ngModel input property and ngModelChange event with reactive form…
Akshay
  • 2,876
  • 3
  • 31
  • 65
50
votes
2 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,071
  • 1
  • 15
  • 35
1
2 3
99 100