0

I'm trying to pass data from html form to the variables (email and password) in function doRegister(), when form submits. But this two-way data binding pops up following errors.

Errors:

In html: Parser Error: Got interpolation ({{}}) where expression was expected at column 0 in [{{email}}=$event] in "path to the html document"

In TS file: Can't resolve all parameters for RegisterComponent in "path to the .ts file"

1. HTML FILE

<p class="lead">Already a member? Please <a routerLink="/login">log in</a> instead</p>
<form (submit)="onRegisterSubmit()">
<div role="alert" *ngIf="formError" class="alert">{{ formError }}</div>
      <p>
          <label>Email</label>
          <input type="text" [(ngModel)]="{{email}}" required>
      </p>
      <p>
          <label>Password:</label>
          <input type="password" [(ngModel)]="{{password}}" required>

      </p>
      <p>
          <button type="submit" >Submit</button>
      </p>
  </form>

2 .TS file

import { User, UserRegister } from './../user';

import { Component, OnInit } from '@angular/core';
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { Loc8rDataService } from '../loc8r-data.service';
import { Router } from '@angular/router';
import { AuthenticationService } from '../authentication.service';



@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css']
})

    export class RegisterComponent implements OnInit {
    
      constructor(private Authentication: AuthenticationService) { }
    
      
      ngOnInit() {
      }
        
    
      formError: string ='';
    
        public onRegisterSubmit(): void {
    
        this.doRegister();
       
          }
    
        private doRegister(): void {
    
          let uEmail = '';
    let uPassword = '';
    const userreg: UserRegister = {email: uEmail, password: uPassword };
    
        this.Authentication.register(userreg)
        .catch((message: string) => this.formError = message);
    
        }
    
    }
1
  • 1
    Just remove the curlies {{email}} => email Commented Jan 30, 2021 at 12:26

2 Answers 2

1

Identifier 'password' is not defined. The component declaration, template variable declarations, and element references do not contain such a member

because it unable to find those two variables in TS file, use this:

HTML file .

<p class="lead">Already a member? Please <a routerLink="/login">log in</a> instead</p>
    <form (submit)="onRegisterSubmit()">
    <div role="alert" *ngIf="formError" class="alert">{{ formError }}</div>
          <p>
              <label>Email</label>
              <input type="text" [(ngModel)]="email" required>
          </p>
          <p>
              <label>Password:</label>
              <input type="password" [(ngModel)]="password" required>
    
          </p>
          <p>
              <button type="submit" >Submit</button>
          </p>
      </form>

.TS file

import { User, UserRegister } from './../user';

import { Component, OnInit } from '@angular/core';
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { Loc8rDataService } from '../loc8r-data.service';
import { Router } from '@angular/router';
import { AuthenticationService } from '../authentication.service';



@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css']
})

    export class RegisterComponent implements OnInit {
    
      constructor(private Authentication: AuthenticationService) { }
    
      
      ngOnInit() {
      }
      password:string='';
      email:string='';
        
    
      formError: string ='';
    
        public onRegisterSubmit(): void {
    
        this.doRegister();
       
          }
    
        private doRegister(): void {
    
          let uEmail = '';
    let uPassword = '';
    const userreg: UserRegister = {email: uEmail, password: uPassword };
    
        this.Authentication.register(userreg)
        .catch((message: string) => this.formError = message);
    
        }
    
    }
Sign up to request clarification or add additional context in comments.

1 Comment

prompts an error: Can't resolve all parameters for RegisterComponent path/register/register.component.ts
1

See the following for added description. But you are just using incorrect syntax. See below.

https://angular.io/guide/two-way-binding

https://angular.io/guide/built-in-directives#ngModel

You don't need the braces

 <input type="password" [(ngModel)]="{{password}}" required>

should be

 <input type="password" [(ngModel)]="password" required>

Be sure that you have declared any variable that you are using in your html template inside your .ts file as a public field or your html file will not be able to use it.

2 Comments

now prompts different error, Identifier 'password' is not defined. The component declaration, template variable declarations, and element references do not contain such a member, does it has anything to do with the error in the TS file that I have mentioned?
Because you reference let uPassword = ''; instead of password. Your .ts file must declare the variables that you use inside your html file. I'll update the answer for clarity

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.