It is a template reference variable that allows us to get reference to html element or something else if we declare directive on this element. We can declare template reference variable via (1) #var ref-var #Default behavior In most cases, Angular sets the reference variable’s value to the html element on which it was declared … Read more
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
Since you have several values you want to use, you need to use an FormArray, since FormControl can only capture one value. Start with declaring an empty formArray: this.myForm = this.fb.group({ useremail: this.fb.array([]) }); Iterate the your emails, and watch for the change event and pass the respective email and event to a method onChange … Read more
To apply min/max validation on a number you will need to create a Custom Validator Validators class currently only have a few validators, namely required requiredTrue minlength maxlength pattern nullValidator compose composeAsync Validator: Here is toned down version of my number Validator, you can improve it as you like static number(prms = {}): ValidatorFn { … Read more
This happens when the array is a primitive type, in your case a String array. This can be solved by using TrackBy. So change your template to match the following: <div *ngFor=”let value of field.values; let i=index; trackBy:trackByFn”> <input type=”text” [(ngModel)]=”field.values[i]” /><br/> </div> <div> <button (click)=”addValue(field)”>Click</button> </div> and in the ts file add the function … Read more
One simple solution is to provide ControlContainer in viewProviders array of your child component like: import { ControlContainer, NgForm } from ‘@angular/forms’; @Component({ …, viewProviders: [ { provide: ControlContainer, useExisting: NgForm } ] }) export class ChildComponent {} Stackblitz Example Read also this article that explains why it’s working. Angular: Nested template driven form Update … Read more
RC6/RC7/Final release FIX To fix this error, you just need to import ReactiveFormsModule from @angular/forms in your module. Here’s the example of a basic module with ReactiveFormsModule import: import { NgModule } from ‘@angular/core’; import { BrowserModule } from ‘@angular/platform-browser’; import { FormsModule, ReactiveFormsModule } from ‘@angular/forms’; import { AppComponent } from ‘./app.component’; @NgModule({ imports: … Read more