angular 폼 검증 기 검증 과 동시에 입력 의 실현 을 제한 합 니 다.

angular 에 서 는 폼 검증 에 많은 명령 을 설정 하 였 습 니 다.
스스로 논 리 를 쓰 지 않 고 명령 을 연결 하면 된다 는 것 이다.
ng-app     angular 모듈 시작
 ng-controller 컨트롤 러,angualr 에 있 는 논리 코드 를 시작 합 니 다.
ng-options  select 에 있 는 option 탭 을 순환 하면 좋 습 니 다.
 ng-submit,폼 제출 실행
novalidate  폼 폼
ng-model  이중 데이터 바 인 딩 실현
ng-show 일정한 논리 에 따라 표시
ng-cloak 이 노드 에 연결 되 어 노드 렌 더 링 을 방지 하고 angular 명령 이 반 짝 임 을 방지 합 니 다.
ng-class 클래스 이름 은 논리 에 따라 나타 납 니 다.
input 가 비어 있 지 않 습 니 다.
ng-pattern 정규 표현 식,input 에 연결 하여 입력 규범 을 제한 합 니 다.
최대 입력 제한
최소 입력 제한
ng-disabled="myForm.$invalid"더러 운 검출
아마 이 지령 들 이 필요 할 거 야.다 들 나 를 뿌리 지 마.감사합니다.
예전 에 응답 식 폼 의 검증 기 를 사 용 했 을 때 입력 한 값 이 불법 인지 검증 할 뿐 해당 하 는 제한 입력 을 하지 않 았 다.예 를 들 어 한 줄 의 금액 을 입력 할 때 숫자 만 입력 할 수 있 고 이런 수요 가 있 을 때 우 리 는 어떻게 입력 을 제한 해 야 합 니까?input 으로 감청?온 모델 체인 지 로 감청?우 리 는 직접 검증 기 안에 쓸 수 있다.
폼 의 검증 은 템 플 릿 구동 검증 과 응답 식 폼 의 검증 으로 나 뉘 는데 응답 식 폼 에 사용자 정의 검증 기 를 추가 하 는 것 이 매우 편리 하기 때문에 우 리 는 직접 응답 식 폼 의 검증 을 연구 기초 로 한다.
우선 기본 폼 을 구성 합 니 다.

<form nz-form [formGroup]="validateForm">
 <nz-form-item>
  <nz-form-label [nzSpan]="6" nzFor="code">GA Code</nz-form-label>
  <nz-form-control [nzSpan]="14">
   <input nz-input name="code" formControlName="code" id="code">
  </nz-form-control>
 </nz-form-item >
</form>

validateForm: FormGroup;
constructor(
  private fb: FormBuilder,
) {
}
ngOnInit() {
  this.validateForm = this.fb.group({
    code: [33, [Validators.required, Validators.maxLength(6)]],
  });
}

우리 가 만 든 이 응답 식 폼 은 구 글 이 검증 한'code'필드 를 검증 하고 두 개의 검증 기 를 주 었 다.하 나 는 필수 검증 이 고 하 나 는 검증 길이 가 가장 긴 것 이 6 자리 이다.실행 되면 우리 가 입력 한 6 자리 범 위 를 넘 으 면 입력 상자 가 빨간색 으로 변 합 니 다.이것 은 OK 입 니 다.
지금 우 리 는 검증 과 동시에 입력 을 제한 해 야 한다.예 를 들 어 사용자 에 게 숫자 만 입력 하 게 하고 다른 모든 것 은 입력 할 수 없다.
검증 기 를 만 들 고 검증 과 동시에 입력 을 제한 합 니 다.
우 리 는 정규 표현 식 을 사용 하여 판단 한다.우선,문자열 이 전체 숫자 인지 판단 합 니 다:/^\d*$/.test(value).그리고'불순물'이 있 는 문자열 을 순수한 숫자 로 수정 합 니 다:value.replace(/[^0-9]/ig,').
사고방식 은 검증 기 를 만 들 고 입력 값 이 있 을 때 검증 기 가 운행 하여 전체 숫자 인지 아 닌 지 를 판단 하고 그렇지 않 으 면 교체 하 는 것 이다.우 리 는 다음 과 같은 검증 기 를 얻 을 수 있다.

onlyNumber(): ValidatorFn {
  return (control: AbstractControl): {[key: string]: any} | null => {
    // value           ，     
    if (control.value && !/^\d*$/.test(control.value)) {
      control.setValue(control.value.replace(/[^0-9]/ig, ''), {
        emitEvent: false,
        emitViewToModelChange: false,
      });
    }
    return null;
  };
}

검증 기 를 우리 의 응답 양식 에 사용 합 니 다.

this.validateForm = this.fb.group({
  code: [33, [Validators.required, this.onlyNumber(), Validators.maxLength(6)]],
});

프로그램 을 실행 하고 테스트 테스트 를 마음대로 입력 하 는데 ok 이 라 니?😯（그럼 내 가 몇 번 전에 무슨 소란 을 피 워 서 브 라 우 저 스 택 을 넘 치 게 했 지??)
emmmmmmmm。。。。。。나 는 지난번 에 확실히 브 라 우 저 스 택 을 넘 치 게 했 는데,이번 에는 정상 이 오히려 이상 하 다.영향 을 주지 않 습 니 다.setValue(value, options)의 options 설정 매개 변 수 를 살 펴 보 겠 습 니 다.

only Self:true 라면 매번 변경 할 때마다 이 컨트롤 자체 에 만 영향 을 주 고 부모 컨트롤 에 영향 을 주지 않 습 니 다.기본 값 은 false 입 니 다.

emit Event:true 또는 제공 되 지 않 으 면 컨트롤 값 이 변 할 때 status Changes 와 value Changes 두 Observable 은 최근 상태 와 값 으로 이 벤트 를 보 냅 니 다.false 라면 사건 을 보 내지 않 습 니 다.4567918)

emitModelToViewChange:true 또는 제공 되 지 않 으 면(기본 값)변경 할 때마다 onChange 이벤트 가 발생 하여 보 기 를 업데이트 합 니 다.

emitViewToModelChange:true 또는 제공 되 지 않 으 면 매번 변화 할 때마다 ngModelChange 이벤트 가 발생 하여 모델 을 업데이트 합 니 다.(기본 값)4567918)
우선,only Self 에 있어 서 우리 가 필드 를 뛰 어 넘 는 검증 이 있다 면 이 를 false 로 설정 하면 폼 차원 의 검증 기 에 영향 을 주지 않 습 니 다.emitEvent 는 status Change 와 vale Changes 두 Observable 에 미 치 는 영향 으로 일반적으로 우 리 는 Observable 방식 으로 필드 의 값 변 화 를 감청 할 때 유용 합 니 다.emitModelToViewChange 설정 은 onChange 를 터치 하여 보 기 를 업데이트 합 니 다.false 로 설정 하면 필드 의 값 을 아무리 업데이트 해도 페이지 에 표시 되 지 않 습 니 다.emitViewToModelChange 는 ngModelCahnge 시간 에 모델 을 업데이트 합 니 다.그러나 이 매개 변 수 를 false 로 설정 하면 소 용이 없 는 것 같 습 니 다.
얻 은 것 만 있 으 면 된다.
만약 우리 가 검증 해 야 할 조건 도 다른 폼 필드 와 관계 가 있다 면 어떻게 합 니까?그럼 formGroup 급 검증 이 필요 합 니 다.
formGroup 의 검증 기
우 리 는 이렇게 검증 기 를 만 들 고 formGroup 으로 구 성 된 검증 기 를 되 돌려 야 합 니 다.

onlyNumberValidator(formKeys: string[]): ValidatorFn {
  return (formGroup: FormGroup): ValidationErrors | null => {
    for (const key of formKeys) {
      const value = formGroup.controls[key].value;
      if (value && !/^\d*$/.test(value)) {
        formGroup.controls[key].setValue(value.replace(/[^0-9]/ig, ''), {
          onlySelf: true,
        });
      }
    }
    return null;
  }};

사용:

this.validateForm = this.fb.group({
  typeList: [[]],
  feeRate: [null, [Validators.required, Validators.pattern(/^[0-9]+(.[0-9]{1,2})?$/), Validators.max(0.999)]],
  code: [33, [Validators.required, Validators.maxLength(6)]],
}, {
  validator: this.onlyNumberValidator(['code']),
});

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.