Angular의 형태에 대해 자세히 알아보기

이 글에서는 Angular의 양식에 대해 자세히 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

Angular form

---

템플릿 양식이란 무엇입니까?

양식의 데이터 모델은 구성 요소 템플릿의 관련 지침을 통해 정의됩니다. 양식의 데이터 모델은 이 방법은 HTML 구문에 의해 제한되므로 템플릿 기반 접근 방식은 일부 간단한 시나리오에만 적합합니다.

반응형 양식이란 무엇인가요?

반응형 양식은 시간이 지남에 따라 값이 변경되는 양식 입력을 처리하는 모델 기반 방식을 제공합니다. 반응형 양식을 사용할 때 HTML 코드 대신 TypeScript 코드를 작성하여 기본 데이터 모델을 생성합니다. 모델이 정의된 후 몇 가지 특정 지침을 사용하여 템플릿의 HTML 요소를 기본 데이터 모델과 연결합니다.
참고:

• 데이터 모델은 임의의 개체가 아니며 FormControl, FormGroup, FormArray 등과 같은 각도/양식 모듈의 특정 클래스로 구성됩니다. 템플릿 형식에서는 이러한 클래스에 직접 액세스할 수 없습니다. [관련 권장 사항: "angular Tutorial"]

• 반응형 양식은 HTML을 생성하지 않지만 템플릿은 직접 작성해야 합니다.

• 템플릿 폼에서는 데이터 모델과 관련된 클래스에 접근할 수 없고, 폼의 최종 데이터만 얻을 수 있고, 반응형 폼에서는 데이터 모델과 관련된 클래스에 접근할 수 있지만, 참조할 수 없으므로 템플릿에서는 작동할 수 없고 TypeScript 코드에서만 작동할 수 있습니다.

반응형 양식

FormGroup

FormGroup은 양식의 일부 또는 전체를 나타낼 수 있습니다. 이는 여러 FormControl의 모음입니다. FormGroup은 여러 FormControl의 값과 상태를 집계합니다. 양식 유효성 검사 중에 FormGroup의 하나의 FormControl이 유효하지 않으면 전체 FormGroup이 유효하지 않게 됩니다.

FormControl

FormControl은 일반적으로 입력 요소를 나타내는 데 사용되지만 달력이나 드롭다운 선택 상자와 같은 보다 복잡한 구성 요소를 나타내는 데에도 사용할 수 있습니다. . FormControl은 연결된 HTML 요소의 현재 값, 요소의 유효성 검사 상태 및 요소 수정 여부와 같은 정보를 저장합니다.

FormArray

FormArray는 FormGroup과 유사하지만 길이 속성이 있습니다. 일반적으로 FormGroup은 전체 양식 또는 양식 필드의 고정 하위 집합을 나타내는 데 사용되며 일반적으로 FormArray는 증가할 수 있는 필드 집합을 나타내는 데 사용됩니다.

Form Validation

Angular 내장 유효성 검사기

Angular는 더 일반적으로 사용되는 여러 내장 유효성 검사기를 제공합니다.

• Validators.required - 양식 컨트롤 값이 비어 있지 않습니다.
• Validators.email - 양식 컨트롤 값의 형식은 이메일입니다.
• Validators.minLength() - 양식 컨트롤 값의 최소 길이
• Validators.maxLength() - 양식 컨트롤 값의 최대 길이
• Validators .pattern() - 양식 컨트롤의 값은 패턴에 해당하는 패턴(정규식)과 일치해야 합니다.

맞춤형 반응형 양식 유효성 검사기

실제 개발에서는 프로젝트 요구 사항을 충족하기 위해 일부 유효성 검사기를 사용자 정의해야 합니다. 일반적으로 확인 기능은 다음 형식으로 정의할 수 있습니다.

xxxxValidator(control: AbstarctControl): {[key: string]: any} {    
      // TODO 编写校验规则   
      return null;  
 }

다음은 일반적인 등록 페이지를 예로 들어 설명합니다.

초기화 양식

ngOnInit(): void {  
     this.formModel = this.fb.group({    
	username: ['', [Validators.required, Validators.minLength(6)]],    
	// 密码    
	passwordsGroup: this.fb.group({     
	       password: [''],  
	       passwordConfirm: [''] 
	       }, { validator: this.equalValidator }),    
        // 手机号    
        mobile: ['', this.moblieValidator]  });
 }

검증기 작성

// 手机号码校验
moblieValidator(control: AbstractControl): any {  
   const reg = /^((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8}$/;  
   const valid = reg.test(control.value);  
   console.log('mobile的校验结果：', valid); 
   return valid ? null : { mobile: true };
}

// 密码校验
equalValidator(group: FormGroup): any {  
   const password = group.get('password') as FormControl;  
   const passwordConfirm = group.get('passwordConfirm') as FormControl;  
   const valid = password.value === passwordConfirm.value;  
   console.log('密码校验结果', valid);  
   return valid ? null : { equal: true };
}

Angular 비동기 검증기

Angular의 양식 API는 원격 서비스를 호출하여 양식 필드의 값을 확인할 수 있는 비동기 유효성 검사기도 지원합니다. 비동기 유효성 검사기는 일반 유효성 검사기와 유사하며 메서드이기도 합니다. 유일한 차이점은 비동기 유효성 검사기가 개체가 아니라 관찰 가능한 스트림을 반환한다는 것입니다.

moblieAsyncValidator(control: AbstractControl): Observable<any> {  
   const reg = /^((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8}$/;  
   const valid = reg.test(control.value);  
   console.log(&#39;mobile的校验结果：&#39;, valid); 
   return of(valid ? null : { mobile: true }); 
 }

Angular 상태 필드

• touched 및 untouched

는 사용자가 필드에 액세스했는지 여부, 즉 필드가 포커스를 받았는지 여부를 나타냅니다. 일반적으로 양식 오류 메시지가 표시되는지 여부를 결정하는 데 사용됩니다. 동시에, 어떤 필드라도 터치되면 전체 양식의 터치된 속성이 true가 되고, 모든 필드가 터치되지 않은 경우에만 전체 양식의 터치되지 않은 속성이 true가 됩니다.

• pristine 和 dirty

如果一个字段的值从来没有改变过， 那么它的 pristine 就是 true， dirty 就是 false； 反之， 如果字段的值被修改过， 那么它的pristine 就是 false， dirty 就是 true。 同时， 如果任何一个字段是 dirty， 那么整个表单的 dirty 属性就是 true； 只有所有字段是 pristine 时， 整个表单的 pristine 属性才是 true。

• pending

当一个字段处于异步校验时， 该字段的 pending 属性是 true。

自定义模板式表单的校验器

在Angular의 형태에 대해 자세히 알아보기里， 我们后台有一个编码的数据模型， 只需要将校验器的方法挂在指定字段属性上就可以了。 但是， 在模板式表单里， 后台是没有这类数据模型的， 指令才是唯一能用的东西， 所以我们需要将校验方法包装成指令， 然后才能在模板中使用它。

编写指令

@Directive({  
   selector: '[mobile]', 
    providers: [{provide: NG_VALIDATORS, useValue: moblieValidator, multi: true}]})
 export class MobileValidatorDirective {  
    constructor() { }
 }
 
// html中引用
<div>  手机号:<input ngModel type="number" name="mobile" mobile required></div>

mutli: true ：指的是在 NG_VALIDATORS 这个 Token 下可以挂不同 useValue 属性所表示的值。

注意: 在模板式表单中， 是不可以在模板中使用字段的状态属性的。 模板式表单与Angular의 형태에 대해 자세히 알아보기不同， 它的模型的值和它状态的变更是异步的， 而且很难控制。
如果想要使用字段的状态属性，我们可以进行如下操作：

// .html文件中
<div>  
   用户名:<input ngModel type="text" minlength="6" name="username" (input)="onUsernameInput(myForm)" required>
</div>
<div [hidden]="usernameValid || usernameUntouched">  
    <div [hidden]="!myForm.form.hasError(&#39;required&#39;, &#39;username&#39;)">
      用户名是必填项！
    </div>  
    <div [hidden]="!myForm.form.hasError(&#39;minlength&#39;, &#39;username&#39;)">
      用户名长度至少是6位！
    </div>
</div>
// .ts文件中
usernameValid = true; 
usernameUntouched = true; 
onUsernameInput(form: NgForm): void {  
   if (form) {
      this.usernameValid = form.form.get(&#39;username&#39;).valid;    
      console.log(&#39;valid&#39;, this.usernameValid);          
      this.usernameUntouched = form.form.get(&#39;username&#39;).untouched;   
      console.log(&#39;untouched&#39;,   this.usernameUntouched);
    }
}

小结: 在使用字段的状态属性时， Angular의 형태에 대해 자세히 알아보기比模板式表单更方便，可以节省很多代码，而且比较可控。所以模板式表单适合用于一些简单的场景。

更多编程相关知识，请访问：编程视频！！

위 내용은 Angular의 형태에 대해 자세히 알아보기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!