Questions tagged [angular4-forms]

Questions related to Angular 4 template or reactive forms.

has two built-in form modules with different approaches:

  • template-based, which uses [(ng-model)] syntax familiar to AngularJS developers, and allow form configuration within templates
  • reactive (or model-driven), which are assuming form model is managed entirely in javascript, often with help of

Both approaches allow validation.

The code and issue tracker are on github.

606 questions
194
votes
4 answers

Angular4 - No value accessor for form control

I have a custom element :
{{ type.icon }} {{…
jbtd
  • 1,943
  • 2
  • 9
  • 4
132
votes
7 answers

Property 'controls' does not exist on type 'AbstractControl' Angular 4

I am trying a nested reactive form in Angular 4. It is working fine but when I try to build AOT it's throwing the error 'controls' does not exist on type 'AbstractControl' I googled and tried few things but no luck. Could anyone tell me how to…
Munna Babu
  • 5,496
  • 6
  • 29
  • 44
56
votes
14 answers

Angular 4 Form Validators - minLength & maxLength does not work on field type number

I am trying to develop a contact form, I want user to enter phone number values between length 10-12. Notably same validation is working on Message field, Its only number field which is giving me trouble. I found this answer but it is of no use for…
Sangwin Gawande
  • 7,658
  • 8
  • 48
  • 66
53
votes
7 answers

Get Value From Select Option in Angular 4

How do I get the value from the select option in Angular 4? I want to assign it to a new variable in the component.ts file. I've tried this but outputs nothing. Can you also do it using [(ngModel)]? component.html
Joseph
  • 7,042
  • 23
  • 83
  • 181
27
votes
4 answers

jit_nodeValue_4(...).$any is not a function Angular5

ERROR TypeError: jit_nodeValue_4(...).$any is not a function at Object.eval [as handleEvent] (AddNewConnectionsComponent.html:42) at handleEvent (core.js:13581) at callWithDebugContext (core.js:15090) at Object.debugHandleEvent [as handleEvent]…
25
votes
2 answers

patchvalue or setvalue of formbuilder does not mark field as dirty or touched

I have a multi-step form where the user traverses back and forth to the form. I save the form data in service and when he comes back I use patchValue to patch all the data to form. I tried setValue also, but the form fields are not marked as either…
Hacker
  • 7,798
  • 19
  • 84
  • 154
21
votes
2 answers

Passing on all directives to a child element of the component

I have a few custom directives which are basically designed for . And I have a custom component There are a ton s along with simple s in my application for some of which I like to use the…
Tabrez Ahmed
  • 2,830
  • 6
  • 31
  • 48
19
votes
13 answers

Angular 5 - form validation e-mail

i want to solve this problem: Angular 5 - template driven form An input-field has type email. Example: I want to validate this field. But it should not be a required field. The…
HansPeter
  • 319
  • 1
  • 4
  • 12
18
votes
2 answers

ng-bootstrap not working in angular 4

I am new with angular 4, I am trying to configure bootstrap. I installed ng-bootstrap: https://ng-bootstrap.github.io/#/getting-started I did all like on the page, but I don't see the bootstrap on my page. Here is my…
17
votes
3 answers

Angular 4 - validator custom function this is undefined

I'm building an app with component FormComponent. inside I'm using reactive forms module from angular core and create a custom validator. the function is calling another function by using this - as I supposed it will refer to the FormComponent, but…
Yehuda Menahem
  • 255
  • 1
  • 3
  • 13
16
votes
6 answers

What is the ideal way to sort a FormArray object in Angular 2+?

I have a formArray which consist of multiple form groups. I need to sort the array dynamically based on a boolean field present in each of the form group in the array. The boolean field is a checkbox and at any given point of time only one checkbox…
16
votes
5 answers

Angular manually update ngModel and set form to dirty or invalid?

I have a form and an underlying model like this From component myTextModel: string; updateMyTextModel(): void { this.myTextModel = "updated model value"; //todo- set form dirty (or invalid or touched) here } Html template
Toby
  • 163
  • 1
  • 1
  • 4
15
votes
7 answers

ngSubmit not working

I have an angular 4 form where I am trying to submit data HTML Code
Scheduler
SmartestVEGA
  • 8,415
  • 26
  • 86
  • 139
15
votes
1 answer

Mocking a parent FormGroup via @input in Jasmine

So I have a child component that goes something like this export class ChildComponent implements OnInit { @Input('parentForm') public parentForm: FormGroup; constructor(private fb: FormBuilder, private cd: ChangeDetectorRef) { } …
15
votes
4 answers

Maximum value validator with dynamic value

I have a service which returns a value representing the money user has, and I want the user to be able to do transactions for a value equal or less than the total amount of money. I've tried to use max validation like this: valid() { const…
miguelopezv
  • 790
  • 2
  • 8
  • 28
1
2 3
40 41