时间戳

首页 > 解决方案 > 两种方式数据绑定和将数据从 html 发送到 ts 文件中的变量

angular - 两种方式数据绑定和将数据从 html 发送到 ts 文件中的变量

问题描述

当表单提交时，我正在尝试将数据从函数传递html form到variables( )。但是这种双向数据绑定会出现以下错误。email and passworddoRegister()

错误：

在 html 中：解析器错误：得到插值 ({{}})，其中表达式应位于“html 文档路径”中 [{{email}}=$event] 的第 0 列

在 TS 文件中：无法解析“.ts 文件路径”中 RegisterComponent 的所有参数

1.HTML文件

<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 文件

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);
    
        }
    
    }

标签： angulartypescript

解决方案

有关添加的说明，请参见以下内容。但是您只是使用了不正确的语法。见下文。

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

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

你不需要牙套

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

应该

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

确保您已将您在 .ts 文件内的 html 模板中使用的任何变量声明为公共字段，否则您的 html 文件将无法使用它。

推荐阅读