Stack Overflow
Stack Overflow

Questions tagged [angular2-formbuilder]

Questions about Angular FormBuilder, a built-in API for creating instances of a FormControl / FormGroup / or FormArray using less code. Available in @angular/forms package.

Angular FormBuilder is a built-in API in @angular/forms package for creating instances of a FormControl / FormGroup / or FormArray. It reduces the boilerplate code required and allows you to create complex reactive form.

has the following methods.

  • group(): Creates FormGroup.

  • control(): Creates FormControl.

  • array(): Creates FormArray.

Related tags: , , ,

See the official guide for a detailed introduction to FormBuilder.

242 questions
115
votes
5 answers

What is the difference between formControlName and FormControl?

I'm using ReactiveFormsModule of Angular2 to create a component that contains a form. Here is my code: foo.component.ts: constructor(fb: FormBuilder) { this.myForm = fb.group({ 'fullname': ['', Validators.required], 'gender': [] …
smartmouse
  • 11,808
  • 26
  • 77
  • 154
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…
Giedrius Kiršys
  • 4,454
  • 1
  • 16
  • 27
99
votes
10 answers

ngModel cannot be used to register form controls with a parent formGroup directive

After upgrading to RC5 we began getting this error: ngModel cannot be used to register form controls with a parent formGroup directive. Try using formGroup's partner directive "formControlName" instead. Example:
…
user2363245
  • 1,405
  • 1
  • 10
  • 13
69
votes
7 answers

Two way binding in reactive forms

Using Angular 2, two-way binding is easy in template-driven forms - you just use the banana box syntax. How would you replicate this behavior in a model-driven form? For example, here is a standard reactive form. Let's pretend it's much more…
ebakunin
  • 2,832
  • 6
  • 23
  • 41
67
votes
4 answers

Form control valueChanges gives the previous value

I have a form control with name 'question1' within the form object parentForm and I have subscribed to it in the following way. Its a radio button with two options Yes and No, when I select No I get Yes and when I select Yes its a…
Amit Chigadani
  • 22,665
  • 10
  • 67
  • 83
54
votes
6 answers

formGroup expects a FormGroup instance

I have an Angular 2 RC4 basic form example on Plunkr that appears to throw the following error (In Chrome DEV console) Here's the plunkr https://plnkr.co/edit/GtPDxw?p=preview Error: browser_adapter.ts:82 EXCEPTION: Error: Uncaught (in promise):…
user6123723
  • 7,626
  • 15
  • 59
  • 97
41
votes
4 answers

How to append new FormGroup or FormControl to form

I have the following form in Angular created with FormBuilder: constructor(private fb: FormBuilder) { this.myForm = fb.group({ 'name': ['', [Validators.required], 'surname': ['', [Validators.required], 'email': ['',…
smartmouse
  • 11,808
  • 26
  • 77
  • 154
35
votes
2 answers

Why should I use Validators.compose()?

I have a field I want to validate with multiple validators. Using the Module Driven approach the code looks likes this: this.exampleForm = this.fb.group({ date_start : [ '', Validators.compose([ Validators.required, …
Mihailo
  • 3,814
  • 4
  • 19
  • 30
32
votes
1 answer

Disable the entire form at once (Angular reactive form)

Is there any way to disable the entire form in angular when using Reactive forms. I know it is possible to make them disable one by one. this.tempForm = this.fb.group({ m26_type: '', m26_name: '' …
YD_
  • 735
  • 2
  • 7
  • 17
30
votes
5 answers

patchValue with { emitEvent: false } triggers valueChanges on Angular 4 formgroup

I have a formbuilder group and am listening for changes with valueChanges and triggering a save function followed by refresh function on the form: this.ticketForm.valueChanges.debounceTime(1000).distinctUntilChanged() .subscribe(data => { …
larpo
  • 743
  • 1
  • 7
  • 18
24
votes
1 answer

Use disable with model-driven form

I'm trying to use the disabled inside my model-driven form. I have the following form: this.form = this.formBuilder.group({ val1: ['', Validators.required], val2: [{value:'', disabled:this.form.controls.val1.valid}] }); I'm getting an error…
ncohen
  • 6,184
  • 19
  • 61
  • 112
19
votes
1 answer

FormBuilder group is deprecated

I migrated my project to angular 11 and I noticed that the global validations that I added make FormBuilder.group deprecated with the message: group is deprecated: This api is not typesafe and can result in issues with Closure Compiler renaming. Use…
ufk
  • 26,596
  • 55
  • 202
  • 346
16
votes
1 answer

Using nested objects in FormBuilder

So I have this form, and it works fine.. but now I would like to extend the json structure some... https://plnkr.co/edit/aYaYTBRHekHzyS0M7HDM?p=preview The new structure I want to use looks like this (only address: has changed): email: ['',…
Mackelito
  • 3,474
  • 3
  • 32
  • 67
16
votes
2 answers

Angular 2/4 Edit Form Populate FormArray Controls

I'm trying to implement an edit form for a model with nested attributes (FormArray). I'm having trouble with the syntax and I'm uncertain whether I'm on the right track. The attributes for the main form work, it's the nested form I'm having…
ctilley79
  • 2,065
  • 3
  • 30
  • 57
15
votes
4 answers

Angular 2 - Can't set form array value

I get this error: There are no form controls registered with this array yet. If you're using ngModel, you may want to check next tick (e.g. use setTimeout). When using this code: public settingsForm: FormGroup = this.fb.group({ collaborators:…
Chrillewoodz
  • 22,596
  • 18
  • 73
  • 147
1
2 3
…
16 17