无法全神贯注于捕获表单数据 (Angular)

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 不应在您的 class 中定义，因为 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)

Can't wrap my head around capturing form data (Angular)

html

forms

authentication

login

angular