angular-forms

How to dynamically add FormControl to FormArray on button click in Angular?

This example dynamically adds email fields to a reactive form. This would be used to enable users to add multiple email addresses (e.g. Home and Work). This demo has the following dependencies: Angular 8, Angular Material, Bootstrap 4 End Result (Stackblitz Demo) Step 1: Define the form model constructor(private formBuilder: FormBuilder) { } ngOnInit() { … Read more

Limit input field to two decimal places – 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 { private regex: RegExp = new RegExp(/^\d*\.?\d{0,2}$/g); private specialKeys: Array<string> = [‘Backspace’, ‘Tab’, ‘End’, ‘Home’, ‘-‘, ‘ArrowLeft’, ‘ArrowRight’, ‘Del’, ‘Delete’]; constructor(private el: ElementRef) { } @HostListener(‘keydown’, [‘$event’]) … Read more

Angular2 If ngModel is used within a form tag, either the name attribute must be set or the form

If ngForm is used, all the input fields which have [(ngModel)]=”” must have an attribute name with a value. <input [(ngModel)]=”firstname” name=”something”> Standalone By setting [ngModelOptions]=”{standalone: true}” one tells Angular something like, ignore the form and/or ngForm, just bind it to firstname variable please. However, if form-tag was used by mistake (like in my case … Read more

Can’t bind to ‘formControl’ since it isn’t a known property of ‘input’ – Angular2 Material Autocomplete issue

While using formControl, you have to import ReactiveFormsModule to your imports array. Example: import {FormsModule, ReactiveFormsModule} from ‘@angular/forms’; @NgModule({ imports: [ BrowserModule, FormsModule, ReactiveFormsModule, MaterialModule, ], … }) export class AppModule {}

Create a reusable FormGroup

The piece I was missing was mentioned in rusev’s answer, and that is injecting the ControlContainer. Turns out that if you place formGroupName on a component, and if that component injects ControlContainer, you get a reference to the container which contains that form. It’s easy from here. We create a sub-form component. @Component({ selector: ‘sub-form’, … Read more

Get access to FormControl from the custom form component in Angular

This solution was born from the discussion in the Angular repository. Please, make sure to read it or even better to participate if you are interested in this problem. I’ve studied the code of FormControlName directive and it’s inspired me to write the following solution: @Component({ selector: ‘my-custom-form-component’, templateUrl: ‘./custom-form-component.html’, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: … Read more

AngularJS custom form component / directive using ng-model

Implementing custom form controls (using ngModel) Use the ngModel controller and the object form of the require property in the DDO: angular.module(‘myModule’, []) .directive(‘myDirective’, function() { return { restrict: ‘E’, require: { ngModelCtrl: ‘ngModel’ }, scope: { ngModel: ‘<‘ }, bindToController: true, controllerAs: ‘$ctrl’, template: `<div> <button ng-click=”$ctrl.ngModelCtrl.$setViewValue(‘foo’)”> Set foo </button> <button ng-click=”$ctrl.ngModelCtrl.$setViewValue(‘bar’)”> Set bar … Read more