Проверка CheckMark для формы

Question

Реализована форма регистра с использованием Angular 4. Проверка форм ввода с помощью предупреждения об опасности, когда поля пусты.

Пожалуйста, посоветуйте, как проверить эти поля формы ввода, например.имя пользователя, пароль .... с помощью галочки рядом с формой ввода. is validate означает правильный символ not validate означает x символ .. В настоящее время я использую html typcript и 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>