angular-forms

I found this problem in many questions in stackoverflow but no luck. Please help me for figuring out what I am doing wrong. In component : ngOnInit() { this.companyCreatForm = this._formBuilder.group({ name: [null, [Validators.required, Validators.minLength(5)]], about: [null, [Validators.required]], businessType: [null, [Validators.required]], address: this._formBuilder.group({ street: [], website: [null, [Validators.required]], mobile: [null, [Validators.required]], email: [null, [Validators.required]], pageId: [null, [Validators.required]], }), }); Form : <form [formGroup]="companyCreatForm

I have several custom form control components in my Angular application, which implement ControlValueAccessor interface and it works great. However, when markAsPristine() is called on parent form, or on my custom control directly I need to update it's state: my custom control is actually have internal control and I need to call markAsPristine() on it too. SO, how do I know when markAsPristine() is called on my control? The ControlValueAccessor interface has no members, related to this problem, which I can implement. After thorough investigation I've found out that this functionality is not

I have a angular 2 form wherein I have to make a field required on some condition like: description: ['', Validators.required] This description field will be required only on some type of a condition like: if(true){descReq = true}; How can I achieve this, please suggest. Thanks in advance! You can add or remove a validator based on the the value of another control on the form: testForm: FormGroup; constructor(private formBuilder: FormBuilder) { this.testForm = this.formBuilder.group({ condition: [''], description: [''] }); this.testForm.controls['condition'].valueChanges.subscribe(result => {

I'm building a form in Angular with Reactive Forms. I'm using the FormBuilder to make a group of fields. For textboxes this works extremely well. But I can't find a formControl for radio buttons. How does this work? Should I use <input formControlName="gender" type="radio"> just like I use with text input's? Should I do <input formControlName="gender" type="radio"> just like I do with text input's? Yes. How does this work? Form control directives use a ControlValueAccessor directive to communicate with the native element. There are different types of ControlValueAccessors for each of the

I have a modal that contains a form, when the modal is destroyed I get the following error in the console: Form submission canceled because the form is not connected The modal is added to a <modal-placeholder> element which is a direct child to <app-root> , my top level element. What's the correct way to removing a form from the DOM and getting rid of this error in Angular 2? I currently use componentRef.destroy(); There might be other reasons this occurs but in my case I had a button that was interpreted by the browser as a submit button and hence the form was submitted when the button was

I need help in making the rows enable only when the checkbox is check. The default rows should be disabled but when the checkbox is only check, that row will be enabled. Here's the link to my code LINK CODES patchValues() { let rows = this.myForm.get('rows') as FormArray; this.orders.forEach(material => { material.materials.forEach(x => { rows.push(this.fb.group({ checkbox_value: [null], material_id: new FormControl({value: x.id, disabled: true}, Validators.required), material_name: x.name, quantity: [null, Validators.required] })) }) }) } Have a look at the Demo & Src Stack Blitz, Fork

The code is as follows <input type="number" class="form-control" value="" name="cost_price" #name="ngModel" [(ngModel)]="item.cost_price" placeholder="Cost Price" /> User should not be able to type more that 2 decimal places. For example, if the user wants to enter 21.256. He should be only allowed to enter 21.25 How to achieve this using angular 5? First create Directive for limit the two decimal places in typescript like this: import { Directive, ElementRef, HostListener } from '@angular/core'; @Directive({ selector: '[appTwoDigitDecimaNumber]' }) export class TwoDigitDecimaNumberDirective {

I am trying to use angular material autocomplete component in my angular2 project. I added following to my template. <md-input-container> <input mdInput placeholder="Category" [mdAutocomplete]="auto" [formControl]="stateCtrl"> </md-input-container> <md-autocomplete #auto="mdAutocomplete"> <md-option *ngFor="let state of filteredStates | async" [value]="state"> {{ state }} </md-option> </md-autocomplete> Following is my component. import {Component, OnInit} from "@angular/core"; import {ActivatedRoute, Router} from "@angular/router"; import {FormControl} from "@angular/forms"; @Component({

I have Angular form (not reactive), with data binded in ngModel: <form #form="ngForm"> <input [(ngModel)]="user.name"> <input [(ngModel)]="user.color"> <button type="submit">Save</button> </form> How can i disable submit button if binded data has not been changed? do this , check for dirty flag, which tells form dirty or not <button type="submit" [disabled]="!form.dirty">Save</button> form becomes dirty if you change some value in it. Check here for detail : https://angular.io/guide/forms According to your comment 'But what if i erase 1 symbol in input and then wright it again (the value is