Unable to assign form control to template variable in Reactive Forms - angular?

Question

I am new to angular let say, i have reactive form like follow

ngOnInit() {
this.registerFormGroup = this.formBuilder.group({
    email: [ '', Validators.compose([Validators.required, Validators.email])],
    password: this.formBuilder.group({
    first: [ '', Validators.required ],
    second: [ '', Validators.required,  ] 
    })
  });
}

and my angular template looks like follow

<div class="container">
  <form [formGroup]="registerFormGroup" 
    (ngFormSubmit)="registerUser(registerFormGroup.value)" novalidate>
<div class="form-group" >
    <label for="email">Email</label>
    <input type="email" formControlName="email" placeholder="Enter Email" 
   class="form-control">
</div>
<div *ngIf="!registerFormGroup.get('password').get('first').valid" 
     class="alert alert-danger">

</div>

<div class="form-group text-center">
  <button type="submit" class="btn btn-success btn-lg" 
  [disabled]="!registerFormGroup.valid">Submit</button>
</div>

For example, email field has two validations such as required and email type validate so depends upon the error I have to display error message so in my template am using like

<div *ngIf="!registerFormGroup.get('email').valid && (registerFormGroup.get('email').touched)" 
  class="alert alert-danger">

  </div>

Instead of adding same registerFormGroup.get('email') again and again i trying to create template expression like #emailForm="registerFormGroup.get('email')" in

<input type="email" formControlName="email" placeholder="Enter Email" class="form-control" #emailForm="registerFormGroup.get('email')">

so that i can use use like

<div *ngIf="!emailForm.valid" class="alert alert-danger">

  </div>

but i am getting error like

compiler.es5.js:1690 Uncaught Error: Template parse errors: There is no directive with "exportAs" set to "registerFormGroup.get('email')" ("l> ]#emailForm="registerFormGroup.get('email')">

what mistake i made??

Template variables are not ordinary variables. They can't hold arbitrary values like that. — Harry Ninh
– Harry Ninh, Commented Sep 9, 2017 at 4:52
@HarryNinh thanks for the info, i thought of using like #name="ngModel" in template driven forms — Hari
– Hari, Commented Sep 9, 2017 at 4:59
@Robert that link is for template driven where the assign #title="ngModel" but in reactive forms we cant use ngModel right . — Hari
– Hari, Commented Sep 9, 2017 at 5:02
both are similar, refer this one coursetro.com/posts/code/66/Angular-4-Reactive-Forms-Tutorial — Robert
– Robert, Commented Sep 9, 2017 at 5:11

Rohan Fating · Accepted Answer · 2017-09-09 06:24:29Z

3

You can create common function to access form like below:

validateFormControl(controName: string) {
    let control = registerFormGroup.get(controName);
    return control.invalid && control.touched;
}

In Templete use this call wherever you need, you just need to pass your control name in function, you can modify this function as per your need as well and you do not need to use form.get all the time. This makes your template more cleaner and performance efficient.

<div *ngIf="validateFormControl('email')" 
  class="alert alert-danger">
  error message
</div>

<div *ngIf="validateFormControl('password')" 
      class="alert alert-danger">
   error message
</div>

answered Sep 9, 2017 at 6:24

Rohan Fating

2,13317 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

crush Over a year ago

How does this make it more performance efficient? Wouldn't this actually do the opposite?

Rahul Singh · Accepted Answer · 2017-09-09 05:55:45Z

1

Create a method on the component that returns if the form is valid or not and return it in the component

  checkError(){ // either you can pass the form from the template or use the component for decleration
    return registerFormGroup.get('email').valid;
  }

In the template call

  <div *ngIf="checkError()" class="alert alert-danger">
    // Always make sure not to use controls in the template it will result in AOT compilation error
  </div>

answered Sep 9, 2017 at 5:55

Rahul Singh

19.7k13 gold badges69 silver badges96 bronze badges

Comments

Chandru · Accepted Answer · 2017-09-09 05:51:42Z

try this :

component.html

<div class="container">
    <form [formGroup]="registerFormGroup" 
    (ngFormSubmit)="registerUser(registerFormGroup.value)" novalidate>
    <div class="form-group" [ngClass]="{'has-error':!registerFormGroup.controls['email'].valid}">
        <label for="email">Email</label>
        <input type="email" formControlName="email" placeholder="Enter Email" 
        class="form-control">
        <p class="alert alert-danger" *ngIf="registerFormGroup.controls['email'].dirty && !registerFormGroup.controls['email'].valid">Invalid email address</p>
    </div>
    <div class="form-group text-center">
        <button type="submit" class="btn btn-primary" [disabled]="!registerFormGroup.valid">Submit</button>
    </div>
</form>
</div>

component.ts

import { FormGroup, FormBuilder, Validators } from '@angular/forms';

export class AppComponent implements OnInit {
registerFormGroup: any;
constructor(
        private formBuilder: FormBuilder
    ) {}

ngOnInit() {
this.registerFormGroup = this.formBuilder.group({
            email: [null , Validators.compose([Validators.required, Validators.email])]
        });
}
}

Tomas · Accepted Answer · 2018-07-19 12:23:18Z

Angular team strongly discourage from using functions outputs in templates due to change detection strategy. You might be interested in following solution, using ngForm directive:

<div class="container">
  <form [formGroup]="registerFormGroup" 
    (ngFormSubmit)="registerUser(registerFormGroup.value)" novalidate>
<div class="form-group" >
    <label for="email">Email</label>
    <input type="email" formControlName="email" placeholder="Enter Email " 
   class="form-control" #email="ngForm">
</div>
<div *ngIf="email.invalid" 
     class="alert alert-danger">

</div>

It's still a hush to copy-paste it in template, but at least you might have direct reference to control via it's template variable. I personally go with controller getter function still, but I'm posting this answer for sake of answer completeness.

TomerBu · Accepted Answer · 2019-07-31 09:28:19Z

0

Although I agree with the accepted answer (you should have a dedicated method in your form component that will encapsulate the validation process) sometimes you need a quick check in the template:

The trick is to expose the formGroup from your component and use it like so:
Template:

<input id="name" class="form-control"
     formControlName="name" required
     [class.is-invalid]="
     f.name.invalid &&
     (f.name.touched ||
     f.name.touched.dirty)">

Component:

  //easily access your form fields
  get f() { return this.checkoutForm.controls; }

answered Jul 31, 2019 at 9:28

TomerBu

1,50315 silver badges16 bronze badges

Comments

Tao · Accepted Answer · 2020-05-12 15:30:50Z

0

I was also looking for a more elegant solution than calling form.get multiple times. Here is what I come up with using ngif

 <div class="col-sm-6" *ngIf="form.get('sponsor') as sponsor">

            <input type="text" formControlName="sponsor" id="sponsor" class="form-control" name="sponsor"
              [class.is-invalid]="sponsor.errors && sponsor.touched">

        </div>

using the as feature on ngIf to create a template variable

answered May 12, 2020 at 15:30

Tao

1

Collectives™ on Stack Overflow

Unable to assign form control to template variable in Reactive Forms - angular?

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related