Question

我只是想创建一个登录页面的模型，并且需要在表单中输入username和password值，并使用这些值来验证用户是否应该进行身份验证。我看过十几个教程，似乎无法完全理解它。这就是我所拥有的：

login.component.html

<form #f="ngForm" (ngSubmit)="loginUser()">
  <div class="form-group">
    <label for="username">Username</label>
      <input type="text" id="username" name="username" 
        [(ngModel)]="model.username" #username="ngModel"
        class="form-control" required>

      <label for="password">Password</label>
      <input type="password" id="password" name="password" 
      [(ngModel)]="model.password" #password="ngModel"
      class="form-control" required>
    <div style="padding-top:20px">
      <button type=submit class="button">Login</button>
    </div>
  </div>
</form>

login.component.ts（我在这里错了，但我试过了。“if”语句肯定是错误的）

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { NgForm, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms'

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  myForm: FormGroup

  constructor(private router: Router) {
   }

  ngOnInit() {
  }

  loginUser(f: NgForm) {
    if (f.value == "admin" && f.value == "admin"){
      this.router.navigate(['mockup']);
    }
  }
}

Answer 1

有一些问题：

1-模型未在任何地方定义。因此，model.username无效。只需将其设置为用户名或在calss中的某个位置定义模型。

2 - 如果您不打算在模板中使用它们，则不需要变量（#username =“ngModel”）。例如，你可以这样做：

<input #myUsernameInput="ngModel">

{{ myUsernameInput.valid }} // true/false
{{ myUsernameInput.value }} the value

以及其他各种检查。但是你没有在任何地方执行这些检查，因此不需要定义变量。

3- myForm不应该在您的类中定义，因为formGroups用于反应形式，而不是模板驱动形式。如果要将值传递给方法，一种简单的方法是这样的：

<form (submit)="loginUser(username, password)">
  <div class="form-group">
    <label for="username">Username</label>
      <input type="text" id="username" name="username" 
        [(ngModel)]="username" class="form-control" required>

      <label for="password">Password</label>
      <input type="password" id="password" name="password" 
      [(ngModel)]="password" class="form-control" required>
    <div style="padding-top:20px">
      <button type=submit class="button">Login</button>
    </div>
  </div>
</form>



import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { NgForm, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms'

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  constructor(private router: Router) {
   }

  ngOnInit() {
  }

  loginUser(username: string, password: string) {
    if (username === "admin" && password === "admin"){
      this.router.navigate(['mockup']);
    }
  }
}

解释模板驱动表单的最简单方法意味着所有工作（意味着表单的构建，验证等）都发生在模板（html）中。这是有限的，因为你不能用反应驱动形式做所有事情。然而，反应驱动形式有点复杂。选择哪个取决于情况和偏好，但在这种情况下，模板驱动的表单完全有效。我建议阅读本指南，它非常有用。 https://angular.io/guide/forms

无法围绕捕获表单数据（Angular）

1 个答案: