angular2-forms

How to convert input value to uppercase in angular 2 (value passing to ngControl)

by

As @Eric Martinez suggested, you can create a local template variable, and bind the uppercase string to the value property on the input event: <input type=”text” #input (input)=”input.value=$event.target.value.toUpperCase()” /> Alternatively, you can make this a directive: @Directive({ selector: ‘input[type=text]’, host: { ‘(input)’: ‘ref.nativeElement.value=$event.target.value.toUpperCase()’, } }) export class UpperCaseText { constructor(private ref: ElementRef) { } } … Read more

password and confirm password field validation angular2 reactive forms

by

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?

by

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?

by

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

by

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

by

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

by

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

techhipbettruvabetnorabahisbahis forumuedueduseduedusedusedueduseduseduedu