소개하다.

나는 angular.io guide에서 각도 반응 형식에 관한 원시 문서가 매우 혼란스럽다는 것을 발견했다.그러므로 나는 각도 반응 형식을 어떻게 사용하는지 검증하는 가장 간단한 문장을 제시하고 싶다
본문에서 우리는 다음과 같은 내용을 배울 것이다

각도 반응식 폼

을 사용하여 간단한 사용자 폼 구축

일부 내장형 검증

일부 사용자 정의 검증

이 프레젠테이션의 다음과 같은 사용자 정의 검증을 고려할 것입니다

사용자 이름 가용성 확인

암호 확인 모드

암호 일치 확인

선결 조건

Visual Studio 코드(VS 코드) here에서 설치

부터here 설치 노드

설치 각도 CLI

여기 있다 소스 코드

에서 전체 소스 코드를 찾을 수 있습니다.

github 각도 응용 프로그램 만들기

ng new form-control-app --routing=false --style=css

이 프로젝트에서는 라우팅 기능을 사용하지 않고 부트를 CSS로 사용하여 DOM(Document Object Module) 요소의 스타일을 설계합니다.
위 명령은 form-control-app라는 새 각도 항목을 만듭니다.

부트 설치

디렉토리를 새 항목으로 변경

cd .\form-control-app
npm install bootstrap --save

VS 코드에서 항목 열기

code .

결합키(Ctrl+J)를 눌러 VS 코드에서 터미널 열기

응용 프로그램에 부트 추가

스타일을 엽니다.위치의 css 파일src\styles.css다음 가져오기 정의 추가

@import "~bootstrap/dist/css/bootstrap.css";

수동 양식 구성 요소 만들기

터미널에서 다음 명령을 실행합니다

ng generate component user-form

명령의 약어 형식도 사용할 수 있다

ng g c user-form

FormsModule 및 ReactiveFormsModule 가져오기

파일 열기src\app\app.module.ts 아래 코드 복사

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { UserFormComponent } from './user-form/user-form.component';

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

내장 유효성 검사가 포함된 간단한 양식 추가

src\app\user-form\user-form.component.ts를 열고 다음 코드를 복사합니다

import { Component, OnInit } from '@angular/core';
// Import Form Control Module from angular/forms
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-user-form',
  templateUrl: './user-form.component.html',
  styleUrls: ['./user-form.component.css']
})
export class UserFormComponent implements OnInit {

  // Create the property to hold the FormGroup
  userForm: FormGroup;

  submitted: boolean = true;

  constructor() { }

  ngOnInit(): void {
    this.userForm = new FormGroup({
      // First Name field
      firstName: new FormControl('', [
        Validators.required // required validator                
      ]),
      lastName: new FormControl('', [
        Validators.required // required validator                
      ]),
      userName: new FormControl('', [
        Validators.required, // required validator                
        Validators.minLength(4), // Minimum length of the username is 4 characters
        Validators.maxLength(20), // Maximum length of the username is 20 characters
      ]),
      email: new FormControl('', [
        Validators.required
      ]),
      password: new FormControl('', [
        Validators.required // required validator                
      ]),
      confirmedPassword: new FormControl('', [
        Validators.required // required validator                
      ]),
    })
  }

  // Get the form control
  get userFormControl () {
    return this.userForm.controls;
  }

  // Handle submit event
  onSubmit () {
    this.submitted = true;
    // Check the validation
    if (this.userForm.valid) {
      alert("Thank you for register");
      console.log(this.userForm.value); // Log out the form values in the console browser
    } else {
      alert("Thank you for register");
    }
  }
}

우리는 userForm 유형의 변수 FormGroup 를 만들었습니다.ngOnInit 방법에서, 우리는 모든 기본값과 내장 검증기 초기화 폼을 사용하여 폼을 설정합니다.userFormControl 속성은 이 창의 창 컨트롤을 되돌려줍니다.
커밋 프로세서 이벤트onSubmit는 브라우저 콘솔에서 양식 내용을 인쇄합니다.
현재 src\app\user-form\user-form.component.html를 열고 다음 코드를 넣으십시오

<div class="container">
  <form [formGroup]="userForm" (ngSubmit)="onSubmit()">
    <label for="firstName">First Name</label>
    <input type="text" id="firstName" class="form-control" name="firstName" formControlName="firstName" />
    <div class="text-danger"
      *ngIf="(userFormControl.firstName.touched || submitted) && userFormControl.firstName.errors?.required">
      First Name is required
    </div>
    <label for="lastName">Last Name</label>
    <input type="text" id="lastName" class="form-control" name="lastName" formControlName="lastName" />
    <div class="text-danger"
      *ngIf="(userFormControl.lastName.touched || submitted) && userFormControl.lastName.errors?.required">
      First Name is required
    </div>
    <label for="userName">Username</label>
    <input type="text" id="userName" class="form-control" name="userName" formControlName="userName" />
    <div class="text-danger"
      *ngIf="(userFormControl.userName.touched || submitted) && userFormControl.userName.errors?.required">
      UserName is required
    </div>
    <label for="email">Enter your email:</label>
    <input type="email" id="email" name="email" class="form-control" formControlName="email">
    <div class="text-danger"
      *ngIf="(userFormControl.email.touched || submitted) && userFormControl.email.errors?.required">
      Email is required
    </div>
    <label for="password">Password</label>
    <input type="password" id="password" class="form-control" name="password" formControlName="password" />
    <div class="text-danger"
      *ngIf="(userFormControl.password.touched || submitted) && userFormControl.password.errors?.required">
      Password is required
    </div>
    <label for="confirmedPassword">Confirmed Password</label>
    <input type="password" id="confirmedPassword" class="form-control" name="confirmedPassword"
      formControlName="confirmedPassword" />
    <div class="text-danger"
      *ngIf="(userFormControl.confirmedPassword.touched || submitted) && userFormControl.confirmedPassword.errors?.required">
      Password is required
    </div>
    <br />
    <button type="submit" class="btn btn-primary" [disabled]="userForm.invalid">Submit</button>
  </form>
</div>

응용 프로그램을 업데이트합니다.구성 요소html

우리는 표를 표시하기 위해 src\app\app.component.html 파일을 업데이트했다.아래 코드를 복사하고 입력하십시오src\app\app.component.html.

<div class="container mt-5">
  <app-user-form></app-user-form>
</div>

터미널에서, 우리는 명령을 실행하여 프로그램을 시작할 것이다

ng serve --open

이것은post4200 의 웹 브라우저에서 프로그램을 열 것입니다

http://localhost:4200/ 사용자 지정 인증 서비스 만들기

새 터미널 창을 열고 다음 명령을 실행하여 새 서비스를 만듭니다

ng generate service user-validation

아니면 명령의 약자 형식.

ng g s user-validation

이 명령은 새 파일src\app\user-validation.service.ts과 src\app\user-validation.service.spec.ts을 생성합니다.
파일src\app\user-validation.service.ts을 열고 다음 코드를 입력하십시오

import { Injectable } from '@angular/core';
// Import the validation interface from angular
import { ValidatorFn, AbstractControl } from '@angular/forms';
import { FormGroup } from '@angular/forms';

@Injectable({
  providedIn: 'root'
})
export class UserValidationService {

  constructor() { }

  /**
   * Use to validate the password pattern in the form
   * The password should be
   * 1 - Minimum 8 characters
   * 2 - Has at least one lower case letter
   * 3 - Has at least one upper case letter
   * 4 - Has at least one number
   * If the password fails the check, the property invalidPassword is true
   */
  passordPatternValidator(): ValidatorFn {
    return (passowrdControl : AbstractControl) : { [key: string]: any } => {                
      if (!passowrdControl.value) {
        // password empty or not valid        
        return null;
      }
      const regex = new RegExp('^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$');
      const valid = regex.test(passowrdControl.value);
      return valid ? null : { invalidPassword: true };
    }
  }

  /**
   * Use to compare the passwords in two fields.
   * The method takes two parameters of type string, which represent the name of the fields to be matched
   * The values of two fields will get from the form control and matching them
   * If the value does not match, the property passwordMismatch will be true
   * @param {string} password 
   * @param {string} confirmedPassword 
   */
  matchingPassword (password: string, confirmedPassword: string) {
    return (userForm: FormGroup) => {
      const passwordControl = userForm.controls[password];
      const confirmedPasswordControl = userForm.controls[confirmedPassword];

      if (!passwordControl || !confirmedPasswordControl) {
        // invalid
        return null;
      }

      if (confirmedPasswordControl.errors && !confirmedPasswordControl.errors.passwordMismatch) {
        // password not match
        return null;
      }

      if (passwordControl.value !== confirmedPasswordControl.value) {
        // password not match
        confirmedPasswordControl.setErrors({ passwordMismatch: true });
      } else {
        confirmedPasswordControl.setErrors(null);
      }
    };
  }

  /**
   * Use to validator the username already taken
   * setTimeout function to invoke checking half second, this will make sure the error will be thrown when the user stops typing
   * @param userControl 
   */
  userNameValidator (userControl: AbstractControl) {
    return new Promise(resolve => {
      setTimeout(() => {        
        if (this.validateUserName(userControl.value)) {               
          resolve({
            userNameNotAvailable: true
          })
        } else {          
          resolve(null);
        }
      }, 500);
    })
  }

  /**
   * Validate the username
   * The username should not be any of the following
   * admin, user, superuser
   * @param {string} userName 
   * @requires {boolean} true if the user is satisfied the condition, false otherwise
   */
  validateUserName (userName: string) {
    const excludeUser = ['admin', 'user', 'superuser'];        
    return excludeUser.indexOf(userName) > -1;
  }
}

방법passordPatternValidator은 폼의 암호 모드를 검증하는 데 사용됩니다.비밀번호 모드
1-8자 이상
2 - 적어도 알파벳이 하나 있어요.
3. - 적어도 대문자가 하나 있어요.
4. - 숫자가 하나라도 있어요.
비밀번호가 검사를 통과하지 않으면 속성invalidPassword은true입니다.모드 상세 정보
방법matchingPassword은 두 필드의 암호를 비교하는 데 사용됩니다.이 방법은 일치하는 필드의 이름을 나타내는 문자열 형식의 두 개의 매개 변수를 사용합니다.이 두 필드의 값은 폼 컨트롤에서 가져와 일치합니다.이 방법에 대한 자세한 내용은 Defining custom validators의 설명서를 참조하십시오.
방법userNameValidator은 얻은 사용자 이름을 검증하는 데 사용되며, 얻은 사용자 이름의 검사는 validateUserName에 정의되어 있습니다.setTimeout 함수는 사용자가 입력을 멈출 때 오류가 발생하지 않도록 반초에 한 번씩 checking을 호출합니다.사용자 이름이 실패하면 true로 설정된 속성userNameNotAvailable을 확인하십시오.모드 상세 정보 cross-field validation

사용자 정의 인증서 사용자 정의 유효성 검사 프로그램을 사용하도록 양식 구성 요소 업데이트

src\app\user form\user form。구성 요소ts

src\app\user-form\user-form.component.ts 파일을 열고 코드를 입력합니다.

import { Component, OnInit } from '@angular/core';
// Import Form Control Module from angular/forms
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { UserValidationService } from '../user-validation.service';

@Component({
  selector: 'app-user-form',
  templateUrl: './user-form.component.html',
  styleUrls: ['./user-form.component.css']
})
export class UserFormComponent implements OnInit {

  // Create the property to hold the FormGroup
  userForm: FormGroup;

  submitted: boolean = false;

  constructor(private userValidator:  UserValidationService) { }

  ngOnInit(): void {
    this.userForm = new FormGroup({
      // First Name field
      firstName: new FormControl('', [
        Validators.required // required validator                
      ]),
      lastName: new FormControl('', [
        Validators.required // required validator                
      ]),
      userName: new FormControl('', [
        Validators.required, // required validator                
        Validators.minLength(4), // Minimum length of the username is 4 characters
        Validators.maxLength(20), // Maximum length of the username is 20 characters        
      ], [this.userValidator.userNameValidator.bind(this.userValidator)]),
      email: new FormControl('', [
        Validators.required,
        Validators.email
      ]),
      password: new FormControl('', Validators.compose([
        Validators.required,
        this.userValidator.passordPatternValidator()
      ])),
      confirmedPassword: new FormControl('', [
        Validators.required // required validator                
      ]),
    }, {
      validators: this.userValidator.matchingPassword('password', 'confirmedPassword')
    })    
  }

  // Get the form control
  get userFormControl () {
    return this.userForm.controls;
  }

  // Handle submit event
  onSubmit () {
    this.submitted = true;
    // Check the validation
    if (this.userForm.valid) {
      console.log(this.userForm.value); // Log out the form values in the console browser
      alert("Thank you for register");      
    } else {
      alert("Thank you for register");
    }
  }
}

src\app\user form\user form。구성 요소html

src\app\user-form\user-form.component.html 파일을 열고 코드를 입력합니다.

<div class="container">
  <form [formGroup]="userForm" (ngSubmit)="onSubmit()">
    <label for="firstName">First Name</label>
    <input type="text" id="firstName" class="form-control" name="firstName" formControlName="firstName" />
    <div class="text-danger"
      *ngIf="(userFormControl.firstName.touched || submitted) && userFormControl.firstName.errors?.required">
      First Name is required
    </div>
    <label for="lastName">Last Name</label>
    <input type="text" id="lastName" class="form-control" name="lastName" formControlName="lastName" />
    <div class="text-danger"
      *ngIf="(userFormControl.lastName.touched || submitted) && userFormControl.lastName.errors?.required">
      First Name is required
    </div>
    <label for="userName">Username</label>
    <input type="text" id="userName" class="form-control" name="userName" formControlName="userName" />
    <div class="text-danger"
      *ngIf="(userFormControl.userName.touched || submitted) && userFormControl.userName.errors?.required">
      UserName is required
    </div>
    <div class="text-danger"
      *ngIf="(userFormControl.userName.touched && userFormControl.userName.errors?.userNameNotAvailable)">
      UserName is not available
    </div>
    <label for="email">Enter your email:</label>
    <input type="email" id="email" name="email" class="form-control" formControlName="email">
    <div class="text-danger"
      *ngIf="(userFormControl.email.touched || submitted) && userFormControl.email.errors?.required">
      Email is required
    </div>
    <div class="text-danger" *ngIf="(userFormControl.email.touched && userFormControl.email.errors?.email)">
      Enter a valid email address
    </div>
    <label for=" password">Password</label>
    <input type="password" id="password" class="form-control" name="password" formControlName="password" />
    <div class="text-danger"
      *ngIf="(userFormControl.password.touched || submitted) && userFormControl.password.errors?.required">
      Password is required
    </div>
    <div class="text-danger"
      *ngIf="(userFormControl.password.touched && userFormControl.password.errors?.invalidPassword)">
      Password should have minimum 8 characters, at least 1 uppercase letter, 1 lowercase
      letter and 1 number
    </div>
    <label for="confirmedPassword">Confirmed Password</label>
    <input type="password" id="confirmedPassword" class="form-control" name="confirmedPassword"
      formControlName="confirmedPassword" />
    <div class="text-danger"
      *ngIf="(userFormControl.confirmedPassword.touched || submitted) && userFormControl.confirmedPassword.errors?.required">
      Password is required
    </div>
    <div class="text-danger"
      *ngIf="(userFormControl.confirmedPassword.touched && userFormControl.confirmedPassword.errors?.passwordMismatch)">
      Passwords does not match
    </div>
    <br />
    <button type="submit" class="btn btn-primary" [disabled]="userForm.invalid">Submit</button>
  </form>
</div>

실행 프레젠테이션

터미널을 열고 다음 명령을 실행합니다

ng serve -o

서비스가 이미 설치되어 있고 오류가 발생하면 프로그램을 종료하고 다시 실행하십시오.

요약

각반응 형식 성공 창설

에서 원본 코드를 가져와 여기저기 놀았다.

Reference

이 문제에 관하여(기본 반응 형식), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/thangdc1982/basic-validate-angular-reactive-forms-ghl

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

기본 반응 형식