angular2-forms

What is the difference between formControlName and FormControl?

I believe you missed an important point: [formGroup] directive in the second example. formControlName is used together with [formGroup] to save your form multiple dot navigations. For example: <div> <input type=”text” [formControl]=”myForm.controls.firstName”/> <input type=”text” [formControl]=”myForm.controls.lastName”/> <input type=”text” [formControl]=”myForm.controls.email”/> <input type=”text” [formControl]=”myForm.controls.title”/> </div> Is equivalent to: <div [formGroup]=”myForm”> <input type=”text” formControlName=”firstName”/> <input type=”text” formControlName=”lastName”/> <input type=”text” … Read more

Angular2: validation for won’t trigger when changing the file to upload

I fixed it using kemsky answer and Sebastien’s comment. I made a ngValueAccessor which registers itself on every input with type file. Plunkr can be found here. Most relevant code + explanation beneath: This adds a ControlValueAccessor for file inputs which might be part of the angular framework itself someday(#7341). A file input works different … 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

formGroup expects a FormGroup instance

There are a few issues in your code <div [formGroup]=”form”> outside of a <form> tag <form [formGroup]=”form”> but the name of the property containing the FormGroup is loginForm therefore it should be <form [formGroup]=”loginForm”> [formControlName]=”dob” which passes the value of the property dob which doesn’t exist. What you need is to pass the string dob … Read more

Generic email validator

You can do only using html: <md-input-container class=”md-icon-float md-block” flex-gt-sm> <label>Email</label> <input md-input id=”contact-email” type=”text” ngControl=”email” #email=”ngForm” [(ngModel)]=”contact.email” required pattern=”^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,6})+$”> <div class=”md-errors-spacer” [hidden]=”email.valid || email.untouched”> <div class=”md-char-counter” *ngIf=”email.errors && email.errors.required”> Email is required </div> <div class=”md-char-counter” *ngIf=”email.errors && email.errors.pattern”> Email is invalid </div> </div> </md-input-container>