Angular Stock登入(二)(Day22)

今天我们要实作如何利用Angular内提供的模组，从form表单取值。

FormModel:

Both reactive and template-driven forms track value changes between the form input elements >that users interact with and the form data in your component model. The two approaches share >underlying building blocks, but differ in how you create and manage the common form-control >instances.

Angular有提供响应式form表单模组，与我们常用的jQuery $("")这样的形式还蛮相近的，
只要你用变数绑定你要操作的Html元件，就可以控制元件了喔。

接下来我们来看FormModel提供了哪几种类别让我们使用喔!

• FormControl tracks the value and validation status of an individual form control: 提供表单验证

• FormGroup tracks the same values and status for a collection of form controls.: 追踪同一个formControl群组下的元件

• FormArray tracks the same values and status for an array of form controls.: 追踪一群formControl群组

• ControlValueAccessor creates a bridge between Angular FormControl instances and built-in DOM elements. : 一个介面，用来规范API和原生DOM之间的关系

此次专案我们会用到FormControl
FormControl的建构子:

constructor(formState: any = null, validatorOrOpts?: ValidatorFn | AbstractControlOptions | >ValidatorFn[], asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[])

突然觉得好像看到了乱码对吧!
其实官方文件下面已经帮我们整理出了三个建构子

formState: 初始值，预设是null
validatorOrOpts: 同步验证设定，可以设定单一个验证或利用Ararry设置多个验证
asyncValidator: 异步验证，可以设定单一个验证或利用Ararry设置多个验证

同步验证 vs 异步验证

以注册功能举例，

同步验证:
我们把所有注册的栏位都填完，然後再按下验证，此时系统会
去把全部栏位的资讯进行验证，但这样万一有一个栏位错的话，整份资料都要
发回重填，就很浪费流量，但是请求次数少，可以降低server的负担，蛮适合登入
之类输入资料较少的功能。

异步验证:
只要每填完一个栏位就打API到後端请求验证，在这期间使用者可以继续
接下去的操作，API请求完後会把结果显现，这样的好处是每次请求的流量只有一点，
且可以确保使用者可以立刻知道自己的资料是否填写正确。

OK 接下来要开始进入我们实作过程罗!

首先把模组引入 app.modules里面

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

接下来是在login.component.ts里面设定

import { Component, OnInit } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  title = "登入"
  account = new FormControl('', [Validators.required, Validators.maxLength(10)]) #验证字数须大於10个字
  password = new FormControl('', [Validators.required, Validators.minLength(3)]) #验证字数须不少於3个字
  doLogin() {
    console.log("account Value:" + this.account.value + "/" + "account Status:" + this.account.status);
    console.log("password Value:" + this.password.value + "/" + "password Status:" + this.password.status);
  }

  constructor() { }

  ngOnInit(): void {

  }
}

最後是在html模板上把变数名称绑定上去

<h1>{{title}}</h1>
<form method="post">
  <div class="container">
    <div>
      <label for="account"><b>Account</b></label>
      <input type="text" [formControl]="account">
    </div>
    <div>
      <label for="password"><b>Password</b></label>
      <input type="password" [formControl]="password">
    </div>
    <button type="button" (click)="doLogin()">Login</button>
  </div>
</form>

接着操作後就可以看到

当帐号输入123，密码输入1的时候，帐号的验证状态是valid/密码的验证状态是invalid

当帐号输入123，密码输入1234的时候，帐号的验证状态是valid/密码的验证状态是valid

今天先到这边，明天再继续罗~!