Question

我有一个表格

<form>
  <div class="form-group">
    <input class="form-control" ([ngModel])="login" placeholder="Login" required>
  </div>
  <div class="form-group">
    <input type="password" class="form-control" ([ngModel])="password" placeholder="Password">
  </div>
  <div class="form-group">
    <button (click)="logUpUser()"  class="btn btn-primary">Sign Up</button>
  </div>
</form>

我想将值从HTML表单发送到typescript方法

export class LogUpFormComponent implements OnInit {
    login: string;
    password: string;

    constructor() { }

    logUpUser() {
      console.log(this.login);
    }
}

但是在方法logUpUser()中，我得到了undefined的值。我在做什么错了？

Answer 1

正确的HTML代码必须如下所示：

<form>
  <div class="form-group">
    <input class="form-control" [(ngModel)]="login" placeholder="Login" required>
  </div>
  <div class="form-group">
    <input type="password" class="form-control" [(ngModel)]="password" placeholder="Password">
  </div>
  <div class="form-group">
    <button (click)="logUpUser()"  class="btn btn-primary">Sign Up</button>
  </div>
</form>

然后在您的ts文件中尝试以下操作：

login: string = '';
password: string = '';

发送表格时，为什么值未定义？

1 个答案: