password and confirm password field validation angular2 reactive forms

This is what eventually worked for me – this.addEditUserForm = this.builder.group({ firstName: [”, Validators.required], lastName: [”, Validators.required], title: [”, Validators.required], email: [”, Validators.required], password: [”, Validators.required], confirmPass: [”, Validators.required] },{validator: this.checkIfMatchingPasswords(‘password’, ‘confirmPass’)}); checkIfMatchingPasswords(passwordKey: string, passwordConfirmationKey: string) { return (group: FormGroup) => { let passwordInput = group.controls[passwordKey], passwordConfirmationInput = group.controls[passwordConfirmationKey]; if (passwordInput.value !== passwordConfirmationInput.value) { return … Read more

Q: How to use Angular 2 template form with ng-content?

There is a good chance that you have come up with another solution at this point but I just figured out a way to do this. Hopefully it will help you or someone else. import { NgModel } from ‘@angular/forms’; import { Component, ContentChildren, ViewChild, QueryList, AfterViewInit } from ‘@angular/core’; @Component({ selector: ‘my-custom-form’, template: ` … Read more

How to use date picker in Angular 2?

In fact, you can use a datepicker by simply adding the date value into the type attribute of your inputs: <input type=”date” [(ngModel)]=”company.birthdate”/> In some browsers like Chrome and Microsoft Edge (not in Firefox), you can click on the icon within the input to display the date picker. Icons appear only when you mouse is … Read more

Angular 4 Form FormArray Add a Button to add or delete a form input row

Here’s a shortened version of your code: When you init your form, you can add one empty formgroup inside your formArray: ngOnInit() { this.invoiceForm = this._fb.group({ itemRows: this._fb.array([this.initItemRows()]) }); } get formArr() { return this.invoiceForm.get(‘itemRows’) as FormArray; } Then the function: initItemRows() { return this._fb.group({ // list all your form controls here, which belongs to … Read more

Angular – Submit a form programmatically

You can use ngNoForm with your form to remove ngForm handling and to add plain javascript handler. you can use your code as follows: Html file. <form ngNoForm [formGroup]=”testGroup” [action]=’actionLink’ method=’POST’ #testForm> <input name=”Email” type=”hidden” [value]=’currentUserEmail’> </form> Ts File. @ViewChild(‘testForm’) testFormElement; public currentUserEmail: string = ”; public testGroup = this.formBuilder.group({ Email: ” }); constructor(formBuilder: FormBuilder) … Read more

Manually sanitize a string

You can sanitize the HTML as follows: import { Component, SecurityContext } from ‘@angular/core’; import { DomSanitizer, SafeHtml } from ‘@angular/platform-browser’; @Component({ selector: ‘my-app’, template: ` <div [innerHTML]=”_htmlProperty”></div> ` }) export class AppComponent { _htmlProperty: string = ‘AAA<input type=”text” name=”name”>BBB’; constructor(private _sanitizer: DomSanitizer){ } public get htmlProperty() : SafeHtml { return this._sanitizer.sanitize(SecurityContext.HTML, this._htmlProperty); } } … Read more

Angular2 Reactive forms – Set default value for form fields with dropdown

I know this is an old question, but if anyone looks for it, there is now a better way to set value in the whole form, with PatchValue: this.myForm.patchValue({ country: this.CountryResponse, name: ‘Any Name’ }); this also allows partial, so you would still be able to do something like: this.myForm.patchValue({ country: this.CountryResponse }); or you … Read more

TypeError: Cannot create property ‘validator’ on string ‘abc@gmail.com’ at setUpControl

<form [formGroup]=”form” (ngSubmit)=”onSubmit(form.value)” class=”form-horizontal”> <div class=”form-group row”> <label for=”inputEmail3″ class=”col-sm-4 “>Username</label> <div class=”col-sm-8″> <input formControlName=”email” type=”text” class=”form-control” id=”inputEmail3″ placeholder=”Email Address” [readonly]=”isReadOnly”> </div> </div> </form> please try like this change [formControl] to formControlName. And to set the output to the input field please do the following, point the line this.form.patchValue import { Component } from ‘@angular/core’; … Read more