Stack Overflow
Stack Overflow

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.

611 questions
162
votes
4 answers

Angular4 - No value accessor for form control

I have a custom element :
{{ type.icon }} {{…
jbtd
  • 1,623
  • 2
  • 6
  • 4
94
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
  • 4,279
  • 5
  • 23
  • 43
43
votes
6 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
  • 4,309
  • 11
  • 37
  • 87
38
votes
12 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
  • 6,028
  • 8
  • 40
  • 58
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]…
Enigmatic
  • 460
  • 1
  • 5
  • 15
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…
MarcosF8
  • 1,174
  • 5
  • 12
  • 28
16
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,637
  • 6
  • 27
  • 47
15
votes
11 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
  • 239
  • 1
  • 2
  • 11
13
votes
4 answers

ngSubmit not working

I have an angular 4 form where I am trying to submit data HTML Code
Scheduler
SmartestVEGA
  • 6,995
  • 18
  • 67
  • 118
13
votes
2 answers

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

I have a multi step form where 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,042
  • 16
  • 74
  • 130
13
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
  • 133
  • 1
  • 1
  • 4
11
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) { } …
anonuser1234
  • 429
  • 1
  • 8
  • 24
11
votes
2 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
  • 187
  • 2
  • 12
11
votes
4 answers

FormArray inside Angular Material Table

Note: I succeded doing FormArray inside classic HTML Table, as seen below . I want to have a FormArray inside Angular Material table and to populate it with data. I tried the same approach as with classic HTML Table, but i was not able to compile it…
Marinescu Raluca
  • 267
  • 2
  • 3
  • 14
11
votes
3 answers

Charts in Angular 2+

I want to create a graph similar to the picture I have attached or may be a bar graph. I am using Angular 4 and I have no idea about graphs in Angular. Is a reference link or some sample code available? [![Graph][1]][1]
user8631713
1
2 3
…
40 41