angular2-forms

How to add form validation pattern in Angular 2?

Now, you don’t need to use FormBuilder and all this complicated valiation angular stuff. I put more details from this (Angular 2.0.8 – 3march2016): https://github.com/angular/angular/commit/38cb526 Example from repo : <input [ngControl]=”fullName” pattern=”[a-zA-Z ]*”> I test it and it works 🙂 – here is my code: <form (ngSubmit)=”onSubmit(room)” #roomForm=’ngForm’ > … <input id=’room-capacity’ type=”text” class=”form-control” [(ngModel)]=’room.capacity’ … Read more

Angular2 Error: There is no directive with “exportAs” set to “ngForm”

Since 2.0.0.rc6: forms: deprecated provideForms() and disableDeprecatedForms() functions have been removed. Please import the FormsModule or the ReactiveFormsModule from @angular/forms instead. In short: If you use template-driven forms, add FormsModule to your @NgModule. If you use model-driven forms, add ReactiveFormsModule to your @NgModule. So, add to your app.module.ts or equivalent: import { NgModule } from … Read more

Forms In angular2

I’m guessing that by ngModal you mean ngModel. “1-which form is best template or modal driven and why ?” from: http://blog.ng-book.com/the-ultimate-guide-to-forms-in-angular-2/ To create a new ControlGroup and Controls implicitly use: ngForm and ngControl To bind to an existing ControlGroup and Controls use: ngFormModel and ngFormControl Basically one is more convenient but gives you less control, … Read more

Angular 2 FormGroup Add Validators dynamic

Try this, it should work this.formGroup.controls[“firstName”].setValidators(Validators.required); For multiple validators this.formGroup.controls[“firstName”].setValidators([Validators.required, Validators.minLength(2)]); But doing so will override any validators that are provided during initialization EDIT : To reflect the form controls with newly added Validators immediately, we have to call this.formGroup.controls[“firstName”].updateValueAndValidity(); after setting validators dynamically. this.formGroup.controls[“firstName”].setValidators(Validators.required); this.formGroup.controls[“firstName”].updateValueAndValidity(); DEMO for the same * NOTE * updateValueAndValidity() will … Read more

Angular 2 form validations start date

Based on the answer of santiagomaldonado I have created a generic ValidatorFn that can be used in multiple Reactive Forms with a dynamic return value. export class DateValidators { static dateLessThan(dateField1: string, dateField2: string, validatorField: { [key: string]: boolean }): ValidatorFn { return (c: AbstractControl): { [key: string]: boolean } | null => { const … Read more

Angular 2 Reactive Forms trigger validation on submit

This can be achieved with the sample presented here, where you can make use of NgForm directive: <form [formGroup]=”heroForm” #formDir=”ngForm”> and then in your validation messages just check if the form is submitted: <small *ngIf=”heroForm.hasError(‘required’, ‘formCtrlName’) && formDir.submitted”> Required! </small> EDIT: Now is also { updateOn: ‘submit’} is provided, but that works only if you … Read more

Angular2 disable button

Update I’m wondering. Why don’t you want to use the [disabled] attribute binding provided by Angular 2? It’s the correct way to dealt with this situation. I propose you move your isValid check via component method. <button [disabled]=”! isValid” (click)=”onConfirm()”>Confirm</button> The Problem with what you tried explained below Basically you could use ngClass here. But … Read more

How to clear form after submit in Angular 2?

See also https://angular.io/docs/ts/latest/guide/reactive-forms.html (section “reset the form flags”) >=RC.6 In RC.6 it should be supported to update the form model. Creating a new form group and assigning to myForm [formGroup]=”myForm” will also be supported (https://github.com/angular/angular/pull/11051#issuecomment-243483654) >=RC.5 form.reset(); In the new forms module (>= RC.5) NgForm has a reset() method and also supports a forms reset … Read more