Angular 4 폼 인증 코드 상세 설명

배경:
     최근 itoo 페이지 를 조정 할 때 페이지 폼 이나 텍스트 상자 가 기본 적 인 판단 작업 을 하지 않 은 것 을 발 견 했 습 니 다.그래서 demo 한 편 에 착 수 했 습 니 다.도움 이 되 셨 으 면 좋 겠 습 니 다!!
--------------------------------------------------------------------------------
1.폼 구성 요소 만 들 기:ng g c login12.1 단일 규칙 검증:

<label>   ：</label>
 <input type="text" #userNameRef=ngModel [(ngModel)]=userName required>
 <span [style.color]="userNameRef.valid ? 'black':'red'">{{userNameRef.valid}}</span>

--------------------------------------------------------------------------------
효과:


2.2.다 중 규칙 인증:(비어 있 거나 사용자 이름과 비밀번호 의 길이 가 될 수 없습니다)

<div class="form-group">
 <label>   ：</label>
 <input type="text" class="form-control" #userNameRef=ngModel minlength="3" maxlength="8" [(ngModel)]=userName required>
 <span [style.color]="userNameRef.valid ? 'black':'red'">{{userNameRef.valid}}</span>
</div>

오류 원인 알림 방식:

<div class="form-group">
 <label>   ：</label>
 <input type="text" class="form-control" #userNameRef=ngModel minlength="3" maxlength="8" [(ngModel)]=userName required>
 <span [style.color]="userNameRef.valid ? 'black':'red'">{{userNameRef.errors|json}}</span>
 <div *ngIf="userNameRef.errors?.required">this is required</div>
<div *ngIf="userNameRef.errors?.minlength">should be 3 chacaters</div>
</div>

효과:
\#\#\#:초기 화,입력 데이터 없 음:

\#\#\#:데 이 터 를 입력 하지만 길 이 는 3 보다 작 습 니 다.

\#\#\#:합 법 적 인 입력:
 
  물론 여기 서 문 제 는 합 법 적 일 때 usernameRef.errors=null, 이지 만 사용자 가 보기 좋 지 않 기 때문에 usernameRef.errors=null 일 때 나타 나 지 않 는 다 고 판단 해 야 한다.

<span [style.color]="userNameRef.valid ? 'black':'red'" *ngIf="userNameRef.errors!=null">{{userNameRef.errors|json}}</span>

구체 적 인 실례 로그 인 코드:

<form #form="ngForm" (ngSubmit)="form.form.valid && submit(form.value)" novalidate class="form-horizontal" role="form">
 <div class="form-group" [ngClass]="{ 'has-error': form.submitted && !userName.valid }">
  <label class="col-sm-2 control-label">   ：</label>
  <div class="col-sm-10">
   <input required name="userName" [(ngModel)]="user.userName" #userName="ngModel" type="text" class="form-control" placeholder="      ...">
   <div *ngIf="form.submitted && !userName.valid" class="text-danger">       ！</div>
  </div>
 </div>
 <div class="form-group">
  <label class="col-sm-2 control-label">  ：</label>
  <div class="col-sm-10" [ngClass]="{'has-error': form.submitted && !password.valid }">
   <input required minlength="8" maxlength="12" [(ngModel)]="user.password" name="password" #password="ngModel" type="password" class="form-control" placeholder="     ...">
   <div *ngIf="form.submitted && !password.valid" class="text-danger">      ,   8 ！</div>
  </div>
 </div>
 <div class="form-group">
  <div class="col-sm-offset-2 col-sm-10">
   <button type="submit" class="btn btn-success">  </button>
  </div>
 </div>
</form>

login.component:

import { Component, OnInit} from '@angular/core';
import{UserModel} from '../model/user.model';//   usermodel
@Component({
 selector: 'app-login',
 templateUrl: './login.component.html',
 styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
 constructor() { }
 //  user Usermodel
 private user=new UserModel();
 ngOnInit() {
 }
/**
 *     
 * @param form        
 */
 submit(form){
 if(form.username=="1"&&form.password=="12345678"){
  alert("     ");
 }else{
  alert("    ");
 }
 }
}

3.userModel：

export class UserModel{
 userName:string;
 password:string;
}

효과:
1.채 워 지지 않 았 을 때 로그 인 을 클릭:
 
2.로그 인 입력:
 
3.불법 사용자: 

총결산
위 에서 말 한 것 은 편집장 이 소개 한 Angular 4 폼 검증 코드 상세 설명 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 저 에 게 메 시 지 를 남 겨 주세요.편집장 은 제때에 답 해 드 리 겠 습 니 다!