表单的复选标记验证

Question

使用 Angular 4 实现了注册表单。当字段为空时，使用警报危险来验证输入表单。

请建议如何验证这些输入表单字段，例如。用户名密码.... 通过使用输入表单旁边的复选标记。验证意味着正确的符号，不验证意味着 x 符号。目前我正在使用 html 打字稿和 Angular 4。

谢谢..

Answer 1

试试这个：

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

import { Md5 } from 'ts-md5/dist/md5';

import { UserService } from './shared/user.service';
import { IUser, IUserAuth, IUserFeatures } from './shared/user.moldes';

@Component({
  selector: 'app-login',
  styleUrls: ['./login.component.scss'],
  templateUrl: './login.component.html'
})
/**
 * Class representing the LoginComponent.
 */
export class LoginComponent {
  public userForm: FormGroup;

  public username: string;
  public password: string;
  public submitted: boolean;

  constructor(private formBuilder: FormBuilder) {
    this.submitted = false;
    this.buildForm();
  }

  /**
   * Triggers when the user click on the login button.
   */
  public onSubmit(): void {
    this.submitted = true;
    if (!this.userForm.valid) {
      return;
    }
    const user: IUser = {
      email: this.userForm.controls.username.value,
      password: Md5.hashStr(this.userForm.controls.password.value),
    };
    this.userService.authenticateUser(user).subscribe(() => {
      // 
    });
  }

  /**
   * Builds the user login form.
   */
  private buildForm(): void {
    this.userForm = this.formBuilder.group({
      username: [null,[Validators.required],
      password: [null, Validators.required]
    });
  }
}

在template.html中

<form [formGroup]="userForm" (ngSubmit)="onSubmit()" novalidate class="form-wrapper">

    <div class="form-group block"
         [ngClass]="{'has-error': submitted && (userForm.controls.username.errors)}">
      <label>Username</label>
      <input type="text" class="form-control" formControlName="username">
      <p>
        <span *ngIf="submitted && userForm.controls.username.errors?.required">Username is required</span>
      </p>
    </div>

    <div class="form-group block"
         [ngClass]="{'has-error': submitted && (userForm.controls.password.errors)}">
      <label>Password</label>
      <input type="password" class="form-control" formControlName="password">
      <p *ngIf="submitted && userForm.controls.password.errors?.required">Password is required</p>
    </div>

      <button type="submit" class="btn btn-default">Login</button>
      <div>
        <div *ngIf="submitted && userForm.valid">Tick</div>
        <div *ngIf="submitted && !userForm.valid">X</div>
      </div>
  </form>

基于 userForm.valid 您可以显示隐藏图标：

   <div>
       <div *ngIf="submitted && userForm.valid">Tick</div>
       <div *ngIf="submitted && !userForm.valid">X</div>
   </div>