VUE3.0을 빠르게 시작하는 방법:
Angular는 양식을 통해 사용자 입력을 처리하는 두 가지 방법인响应式表单과模板驱动表单제공합니다. [관련 튜토리얼 권장사항: "Angular Tutorial"]
여기서는 반응형 폼만 소개합니다. 템플릿 기반 폼은 공식 홈페이지를 참고하세요:
https://angular.cn/guide/forms-overview#setup-in-template-driven-forms
반응형 양식 컨트롤을 사용하려면 @angular/forms 패키지에서 ReactiveFormsModule 가져와 NgModule 의 imports 배열에 추가해야 합니다. 다음과 같습니다: app.module.ts
/***** app.module.ts *****/
import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
수입: [
// 기타 수입품 ...
ReactiveForms모듈
],
})
내보내기 클래스 AppModule { } 양식 컨트롤을 사용하는 데는 세 단계가 있습니다.
앱에 반응형 양식 모듈을 등록합니다. 이 모듈은 반응형 형식에서 사용하려는 일부 지시문을 선언합니다.
새 FormControl 인스턴스를 생성하고 구성 요소에 저장합니다.
이 FormControl 템플릿에 등록합니다.
양식 컨트롤을 등록하려면 FormControl 클래스를 가져오고 FormControl 의 새 인스턴스를 만들어 클래스의 속성으로 저장합니다. 다음과 같습니다: test.component.ts
/***** test.comComponent.ts *****/
'@angular/core'에서 { 구성요소 }를 가져옵니다.
import { FormControl } from '@angular/forms';
@요소({
선택기: '앱 이름-편집기',
templateUrl: './name-editor.comComponent.html',
styleUrls: ['./name-editor.comComponent.css']
})
내보내기 클래스 TestComponent {
// FormControl의 생성자에서 초기 값을 설정할 수 있습니다. 이 예에서는 빈 문자열입니다. name = new FormControl('');
} 그런 다음 다음과 같이 템플릿에 컨트롤을 등록합니다. test.component.html
<!-- test.comComponent.html -->
<라벨>
이름: <input type="text" [formControl]="이름">
</label>
<!-- 입력에 입력된 값이 변경되면 여기에 표시되는 값도 변경됩니다 -->
<p>name: {{ name.value }}</p> 은
FormControl의 다른 속성 및 메서드에 대해서는 API 참조 매뉴얼 을 참조하세요.https://angular.cn/api/forms/FormControl#formcontrol
FormControl 의 인스턴스를 사용하여 단일 입력 상자에 해당하는 컨트롤을 제어할 수 있는 것처럼 FormGroup 의 인스턴스도 그룹을 추적할 수 있습니다. FormControl 인스턴스(예: 양식의 양식 상태) FormGroup 생성되면 그 안의 각 컨트롤은 해당 이름으로 추적됩니다.
다음 예제 데모를 참조하세요. test.component.ts , test.component.html
import { Component } from '@angular/core';
'@angular/forms'에서 { FormControl, FormGroup, Validators } 가져오기
@요소({
선택기: '앱 테스트',
templateUrl: './test.comComponent.html',
styleUrls: ['./test.comComponent.css']
})
내보내기 클래스 TestComponent는 OnInit {를 구현합니다.
생성자() {}
profileForm = 새 FormGroup({
firstName: new FormControl('', [Validators.required,Validators.pattern('[a-zA-Z0-9]*')]),
성: new FormControl('', Validators.required),
});
onSubmit() {
// 컨트롤 그룹의 각 필드 값을 확인합니다. console.log(this.profileForm.value)
}
} <!-- profileForm 이 FormGroup은 FormGroup 지시문을 통해 양식 요소에 바인딩되어 모델과 양식의 입력 상자 사이에 통신 계층을 생성합니다 -->
<!-- FormGroup 지시문은 또한 양식 요소에서 발생하는 submit 이벤트를 수신하고 ngSubmit 이벤트를 발생시켜 콜백 함수를 바인딩할 수 있습니다. -->
<form [formGroup]="profileForm" (ngSubmit)="onSubmit()">
<라벨>
<!-- FormControlName 지시어는 각 입력 상자를 FormGroup에 정의된 양식 컨트롤 FormControl에 바인딩합니다. 이러한 양식 컨트롤은 해당 요소와 통신합니다 -->
이름: <input type="text" formControlName="firstName">
</label>
<라벨>
성: <input type="text" formControlName="lastName">
</label>
<button type="submit" [disabled]="!profileForm.valid">제출</button>
</form>
<p>{{ profileForm.값 }}</p>
<!-- 제어 그룹의 상태: INVALID 또는 VALID -->
<p>{{ profileForm.status }}</p>
<!-- 통제그룹이 입력한 값이 유효한 값인지 여부: true 또는 false-->
<p>{{ profileForm.valid }}</p>
<!-- 비활성화 여부: true 또는 false-->
<p>{{ profileForm.disabled }}</p>
FormGroup의 다른 속성 및 메서드에 대해서는 API 참조 매뉴얼 을 참조하세요.https://angular.cn/api/forms/FormGroup#formgroup은
. 반응형 양식에서 여러 양식을 처리해야 할 때 여러 양식 컨트롤 인스턴스를 수동으로 만드는 것은 매우 지루합니다. FormBuilder 서비스는 양식 컨트롤을 생성하는 몇 가지 편리한 방법을 제공합니다. FormBuilder 백그라운드에서 동일한 방식으로 이러한 인스턴스를 생성하고 반환하므로 사용이 더 간단합니다.
FormBuilder ReactiveFormModule 에서 제공하는 주입 가능한 서비스 제공자입니다. 이 종속성은 구성 요소의 생성자에 추가하기만 하면 주입될 수 있습니다.
FormBuilder서비스에는control(),group()및array()세 가지 메서드가 있습니다. 이러한 메서드는 구성 요소 클래스에서 각각FormControl,FormGroup및FormArray생성하기 위한 팩토리 메서드입니다.
다음 예를 참조하세요. test.component.ts
import { Component } from '@angular/core';
// 1. FormBuilder 가져오기
import { FormBuilder, Validators } from '@angular/forms';
@요소({
선택기: '앱 테스트',
templateUrl: './test.comComponent.html',
styleUrls: ['./test.comComponent.css']
})
내보내기 클래스 TestComponent {
// 2. FormBuilder 서비스 생성자 삽입(private fb: FormBuilder) { }
ngOnInit() { }
profileForm = this.fb.group({
firstName: ['', [Validators.required, Validators.pattern('[a-zA-Z0-9]*')]],
성: ['', Validators.required],
});
// 동일 // profileForm = new FormGroup({
// firstName: new FormControl('', [Validators.required,Validators.pattern('[a-zA-Z0-9]*')]),
// 성: new FormControl('', Validators.required),
// });
onSubmit() {
console.log(this.profileForm.value)
console.log(this.profileForm)
}
} 이에 비해 FormBuilder 서비스를 사용하면 매번 new 인스턴스를 수동으로 생성할 필요 없이 FormControl , FormGroup 및 FormArray 보다 편리하게 생성할 수 있다는 것을 알 수 있습니다.
검사기 클래스
Validators검사기의 전체 API 목록은 API 매뉴얼https://angular.cn/api/forms/Validators를 참조하세요.
유효성 검사기( Validators ) 함수는 동기 함수 또는 비동기 함수일 수 있습니다.
FormControl 을 인스턴스화할 때 생성자의 두 번째 매개변수로 전달할 수 있습니다.Promise 또는 Observable 반환합니다. 이는 나중에 일련의 유효성 검사 오류 또는 null을 내보냅니다. FormControl 인스턴스화할 때 세 번째 매개변수로 전달할 수 있습니다.성능상의 이유로 Angular는 모든 동기 유효성 검사기가 통과할 때까지 비동기 유효성 검사기를 실행하지 않습니다. 이러한 유효성 검사 오류는 각 비동기 유효성 검사기가 실행된 후에 설정됩니다.
https://angular.cn/api/forms/Validators
클래스 유효성 검사기 {
static min(min: number): ValidatorFn // 입력 가능한 최소값 static max(max: number): ValidatorFn // 최대값 static 필수(control: AbstractControl): ValidationErrors null // 필수 여부 static 필수True(컨트롤: AbstractControl): ValidationErrors |
static email(control: AbstractControl): ValidationErrors null // 이메일 형식인지 여부 static minLength(minLength: number): ValidatorFn // 최소 길이 static maxLength(maxLength: number): ValidatorFn // 최대 길이 static Pattern(pattern: string | RegExp): ValidatorFn // 정규 일치 static nullValidator(control: AbstractControl): ValidationErrors null // 아무것도 하지 않음 static compose(validators: ValidatorFn[]): ValidatorFn |
static composeAsync(validators: AsyncValidatorFn[]): AsyncValidatorFn null |
} FormControl 컨트롤을 인스턴스화할 때
'@angular/forms'에서 import { Validators }를 추가하면 됩니다.
...
ngOnInit(): 무효 {
this.heroForm = 새로운 FormGroup({
// FormControl 컨트롤 이름을 인스턴스화합니다. new FormControl(this.hero.name, [
Validators.required, // 유효성 검사, 필수 Validators.minLength(4), // 길이는 4 이상입니다.
allowedNameValidator(/bob/i) // 사용자 정의 유효성 검사기]),
alterEgo: 새로운 FormControl(this.hero.alterEgo),
힘: 새로운 FormControl(this.hero.power, Validators.required)
});
}
get name() { return this.heroForm.get('name') }
get power() { return this.heroForm.get('power'); 맞춤 맞춤 유효성 검사기의 내용은 API 매뉴얼
https://angular.cn/guide/form-validation
을 참조하세요.
경우에 따라 내장됨 유효성 검사 프로세서는 요구 사항을 잘 충족할 수 없습니다. 예를 들어 양식을 확인해야 하며 입력 값은 특정 배열의 값일 수 있으며 이 배열의 값은 프로그램이 실행됨에 따라 실시간으로 변경됩니다. 내장된 유효성 검사기는 이 요구 사항을 충족할 수 없으므로 사용자 지정 유효성 검사기를 만들어야 합니다.
반응형 양식에 사용자 정의 유효성 검사기를 추가합니다. 위의 내장 유효성 검사기 섹션에는 다음과 같은 forbiddenNameValidator 함수가 있습니다.
import { Validators } from '@angular/forms';
...
ngOnInit(): 무효 {
this.heroForm = 새로운 FormGroup({
이름: 새 FormControl(this.hero.name, [
유효성 검사기.필수,
Validators.minLength(4),
// 1. 사용자 정의 유효성 검사기 추가 allowedNameValidator(/bob/i)
])
});
}
// 2. bob 문자열 내보내기 함수를 사용하여 값 입력을 금지하는 기능을 가진 사용자 정의 유효성 검사기를 구현합니다. allowedNameValidator(nameRe: RegExp): ValidatorFn {
반환(컨트롤: AbstractControl): ValidationErrors null => {
const 금지 = nameRe.test(control.value);
// 3. 값이 유효할 경우 null을 반환하고, 유효하지 않을 경우 검증 오류 객체를 반환합니다. return allowed ?
};
} 유효성 검사기는 값이 유효하면
null반환하고, 유효하지 않으면验证错误对象반환합니다. 인증 오류 객체에는 일반적으로 인증 키(forbiddenName)라는 속성이 있습니다. 해당 값은 오류 메시지({name})를 삽입하는 데 사용할 수 있는 임의 사전입니다.
템플릿 기반 양식에 사용자 정의 유효성 검사기를 추가합니다. 템플릿에 지시어를 추가하기 위해 지시어에는 validator 기능이 포함되어 있습니다. 동시에 이 지시문은 자신을 NG_VALIDATORS 제공자로 등록해야 합니다. 아래와 같이
// 1. 관련 클래스 가져오기 import { NG_VALIDATORS, Validator, AbstractControl, ValidationErrors } from '@angular/forms';
'@angular/core'에서 {Input} 가져오기
@지령({
선택기: '[appForbiddenName]',
// 2. NG_VALIDATORS 토큰 공급자의 공급자로 등록: [{provide: NG_VALIDATORS, useExisting: ForbiddenValidatorDirective, multi: true}]
})
내보내기 클래스 ForbiddenValidatorDirective는 Validator를 구현합니다.
@Input('appForbiddenName') allowedName = '';
// 3. 유효성 검사기 인터페이스를 구현합니다. 즉, 유효성 검사 함수를 구현합니다. verify(control: AbstractControl): ValidationErrors null {
// 값이 유효하면 null을 반환하고, 유효하지 않으면 유효성 검사 오류 객체를 반환합니다. return this.forbiddenName ?
: null;
}
}
// 4. 사용자 정의 검증 기능 내보내기 기능 allowedNameValidator(nameRe: RegExp): ValidatorFn {
반환(컨트롤: AbstractControl): ValidationErrors null => {
const 금지 = nameRe.test(control.value);
// 3. 값이 유효할 경우 null을 반환하고, 유효하지 않을 경우 검증 오류 객체를 반환합니다. return allowed ?
};
} 사용자 정의 유효성 검사 지시문은
useClass대신useExisting사용하여 인스턴스화됩니다.useExisting대신useClass사용하면 새 클래스 인스턴스가 등록되지만forbiddenName없습니다.
<input type="text" 필수 appForbiddenName="bob" [(ngModel)]="hero.name">