Angular에는模板驱动과模型驱动두 가지 유형의 양식이 있습니다. [추천 관련 튜토리얼: "Angular Tutorial"]
1.1 개요
폼의控制逻辑组件模板에 작성되어 있어简单폼 유형에 적합합니다.
1.2 빠르게 시작하기
1)"@angular/forms"에서
종속 모듈 FormsModule import { FormsModule }을 소개합니다.
@NgModule({
가져오기: [FormsModule],
})
내보내기 클래스 AppModule {} 2) DOM 양식을 ngForm으로 변환
<form #f="ngForm" (submit)="onSubmit(f)"></form>
3) 양식 필드를 ngModel
<form #f= " ngForm" (제출)="onSubmit(f)"> <input type="text" name="username" ngModel /> <button>제출</button> </form>4)
"@angular/forms"에서
양식 필드 값 가져오기 { NgForm }을 가져옵니다.
내보내기 클래스 AppComponent {
onSubmit(양식: NgForm) {
console.log(form.value) // {사용자 이름: ''}
}
} 5) 양식 그룹화
<form #f="ngForm" (submit)="onSubmit(f)">
<div ngModelGroup="사용자">
<input type="text" name="username" ngModel />
</div>
<div ngModelGroup="연락처">
<input type="text" name="phone" ngModel />
</div>
<button>제출</button>
</form> "@angular/forms"에서 { NgForm } 가져오기
내보내기 클래스 AppComponent {
onSubmit(양식: NgForm) {
console.log(form.value) // {연락처: {phone: ''}, user:{username: ''}}
}
} 1.3 양식 검증
. <input type="text" name="username" ngModel 필수 패턴="d" /> <button>제출</button> </form>
내보내기 클래스 AppComponent {
onSubmit(양식: NgForm) {
// console.log(form.valid)를 통해 전체 Form이 검증되었는지 확인합니다.
}
} <!-- 전체 양식이 검증에 실패하면 양식 제출을 비활성화합니다 --> <button type="submit" [disabled]="f.invalid">제출</button>은
구성 요소 템플릿에서 양식 항목이 실패할 때 오류 메시지를 표시합니다.
<form #f="ngForm" (제출)="onSubmit(f)">
<input #username="ngModel" />
<div *ngIf="username.touched && !username.valid && username.errors">
<div *ngIf="username.errors.required">사용자 이름을 입력하세요</div>
<div *ngIf="username.errors.pattern">일반 규칙을 따르지 않습니다</div>
</div>
</form> 양식 항목이 유효성 검사에 실패할 경우 스타일을 지정합니다.
input.ng-touched.ng-invalid {
테두리: 2px 단색 빨간색;
} 2.1 개요
양식의控制逻辑검증 로직에 대한 더 많은 제어 기능을 갖고复杂양식 유형에 적합한组件类에 작성됩니다.
모델 기반 양식에서 양식 필드는 FormControl 클래스의 인스턴스여야 합니다. 인스턴스 객체는验证表单字段수 있습니다.
양식 필드 세트는 전체 양식을 구성하며 전체 양식은 양식에 대한整体유효성 검사를 수행할 수 있는 FormGroup 클래스의 인스턴스여야 합니다.
FormControl: 양식 그룹의 양식 항목
FormGroup: 양식은 하나 이상의 FormGroup입니다.
FormArray: 양식 항목 또는 양식 그룹을 동적으로 추가할 수 있습니다. 실패하고 전체가 실패합니다.
2.2 빠르게 시작하기
1) ReactiveFormsModule
import { ReactiveFormsModule } from "@angular/forms" 소개
@NgModule({
가져오기: [ReactiveFormsModule]
})
내보내기 클래스 AppModule {} 2) 구성 요소 클래스
import { FormControl, FormGroup } from "@angular/forms" 에서 FormGroup 양식 제어 객체를 생성합니다.
내보내기 클래스 AppComponent {
contactForm: FormGroup = 새 FormGroup({
이름: 새 FormControl(),
전화: 새로운 FormControl()
})
} 3) 연결된 구성 요소 템플릿의 양식
<form [formGroup]="contactForm" (submit)="onSubmit()"> <input type="text" formControlName="이름" /> <input type="text" formControlName="phone" /> <button>제출</button> </form>
4) 양식 값
내보내기 클래스 AppComponent를 가져옵니다.
onSubmit() {
console.log(this.contactForm.value)
}
} 5) 양식 기본값
contactForm을 설정합니다. FormGroup = new FormGroup({
이름: 새 FormControl("기본값"),
전화: 새로운 FormControl(15888888888)
}) 6) 양식 그룹화
contactForm: FormGroup = new FormGroup({
전체 이름: 새 FormGroup({
firstName: 새 FormControl(),
성: 새로운 FormControl()
}),
전화: 새로운 FormControl()
}) <form [formGroup]="contactForm" (submit)="onSubmit()">
<div formGroupName="전체 이름">
<input type="text" formControlName="firstName" />
<input type="text" formControlName="lastName" />
</div>
<input type="text" formControlName="phone" />
<button>제출</button>
</form> onSubmit() {
console.log(this.contactForm.value.name.username)
console.log(this.contactForm.get(["name", "username"])?.value)
} 2.3 FormArray
요구 사항: 기본적으로 연락처 정보 그룹이 페이지에 표시되며, 버튼을 클릭하면 더 많은 연락처 정보 그룹을 추가할 수 있습니다.
"@angular/core"에서 { Component, OnInit } 가져오기
"@angular/forms"에서 가져오기 { FormArray, FormControl, FormGroup }
@요소({
선택기: "app-root",
templateUrl: "./app.comComponent.html",
스타일: []
})
내보내기 클래스 AppComponent는 OnInit {를 구현합니다.
// contactForm 양식: FormGroup = new FormGroup({
연락처: 새로운 FormArray([])
})
연락처 가져오기() {
this.contactForm.get("contacts")를 FormArray로 반환합니다.
}
//연락처 정보 추가 addContact() {
//연락처 정보 const myContact: FormGroup = new FormGroup({
이름: 새 FormControl(),
주소: 새로운 FormControl(),
전화: 새로운 FormControl()
})
//연락처 정보 배열 this.contacts.push(myContact)에 연락처 정보를 추가합니다.
}
// 연락처 삭제 RemoveContact(i: number) {
this.contacts.removeAt(i)
}
ngOnInit() {
//기본 연락처 정보 추가 this.addContact()
}
onSubmit() {
console.log(this.contactForm.value)
}
} <form [formGroup]="contactForm" (제출)="onSubmit()">
<div formArrayName="연락처">
<div
*ngFor="contacts.controls의 연락처 허용; i = 색인 허용"
[양식그룹이름]="i"
>
<input type="text" formControlName="이름" />
<input type="text" formControlName="주소" />
<input type="text" formControlName="phone" />
<button (click)="removeContact(i)">연락처 정보 삭제</button>
</div>
</div>
<button (click)="addContact()">연락처 정보 추가</button>
<button>제출</button>
</form> 2.4 내장된 양식 유효성 검사기
1) 내장된 유효성 검사기가 제공하는 유효성 검사 규칙을 사용하여 양식 필드의 유효성을 검사합니다.
import { FormControl, FormGroup, Validators } from "@angular/forms"
contactForm: FormGroup = 새 FormGroup({
이름: new FormControl("기본값", [
유효성 검사기.필수,
Validators.minLength(2)
])
}) 2) 전체 양식이 검증을 통과했는지 확인합니다.
onSubmit() {
console.log(this.contactForm.valid)
} <!-- 전체 양식 확인에 실패하면 양식 버튼을 비활성화합니다 --> <button [disabled]="contactForm.invalid">Submit</button>
3) 구성 요소 템플릿
get name()에서 확인이 통과되면 오류 메시지를 표시합니다.
this.contactForm.get("name")을 반환하세요!
} <form [formGroup]="contactForm" (제출)="onSubmit()">
<input type="text" formControlName="이름" />
<div *ngIf="name.touched && name.invalid && name.errors">
<div *ngIf="name.errors.required">이름을 입력해주세요</div>
<div *ngIf="name.errors.maxlength">
이름 길이는 {{ name.errors.maxlength.requiredLength }}보다 클 수 없습니다. 실제 길이는 {{ name.errors.maxlength.actualLength }}입니다.
</div>
</div>
</form> 2.5 사용자 정의 동기 양식 유효성 검사기
사용자 정의 유효성 검사기의 유형
은 특정 확인 메서드를 포함합니다. 확인 메서드는
AbstractControl 유형의 매개 변수 컨트롤을 포함해야 합니다. 실제로는 FormControl 클래스의 인스턴스 객체 유형입니다.
검증에 성공하면 null이 반환됩니다.
검증에 실패하면 객체의 속성이 검증 ID이고 값은 다음과 같습니다. true,
확인 메서드의 반환 값은 ValidationErrors null
import { AbstractControl, ValidationErrors } from "@angular/forms" 입니다.
내보내기 클래스 NameValidators {
// 필드 값에는 공백이 포함될 수 없습니다. static canContainSpace(control: AbstractControl): ValidationErrors null {
// (/s/.test(control.value)) return { canContainSpace: true }인 경우 확인이 실패했습니다.
//확인이 통과되어 null을 반환합니다.
}
} import { NameValidators } from "./Name.validators"
contactForm: FormGroup = 새 FormGroup({
이름: new FormControl("", [
유효성 검사기.필수,
NameValidators.cannotContainSpace
])
}) <div *ngIf="name.touched && name.invalid && name.errors"> <div *ngIf="name.errors.cannotContainSpace">이름에는 공백이 포함될 수 없습니다.</div> </div>
2.6 사용자 정의 비동기 양식 유효성 검사기
import { AbstractControl, ValidationErrors } from "@angular/forms"
"rxjs"에서 { Observable } 가져오기
내보내기 클래스 NameValidators {
static shouldBeUnique(control: AbstractControl): Promise<ValidationErrors null> {
새로운 약속을 반환합니다(해결 => {
if (control.value == "admin") {
해결({ shouldBeUnique: true })
} 또 다른 {
해결(널)
}
})
}
} contactForm: FormGroup = 새 FormGroup({
이름: 새 FormControl(
"",
[
유효성 검사기.필수
],
NameValidators.shouldBeUnique
)
}) <div *ngIf="name.touched && name.invalid && name.errors"> <div *ngIf="name.errors.shouldBeUnique">중복된 사용자 이름</div> </div> <div *ngIf="name.pending">이름 중복 여부 감지</div>
2.7 FormBuilder
양식 생성快捷.
this.fb.control : 양식 항목
this.fb.group : 양식 그룹, 양식은 최소한 하나의 FormGroup입니다.
this.fb.array : 복잡한 양식에 사용되며, 양식 유효성 검사 중에 양식 항목이나 양식 그룹을 동적으로 추가할 수 있습니다. FormArray입니다. 항목이 실패하고 전체가 실패했습니다.
"@angular/forms"에서 { FormBuilder, FormGroup, Validators } 가져오기
내보내기 클래스 AppComponent {
contactForm: FormGroup
생성자(비공개 fb: FormBuilder) {
this.contactForm = this.fb.group({
전체 이름: this.fb.group({
firstName: ["", [Validators.required]],
성: [""]
}),
핸드폰: []
})
}
} 2.8 폼 값의 변화 모니터링
실제 작업에서는 폼 값의 변화에 따라 해당 처리를 수행해야 하는 경우가 많습니다. 일반적으로 ngModalChange 또는 폼을 사용하여
2.8.1 ngModalChange
<div>를구현할 수 있습니다.
<input type="text" [(ngModal)]="name" (ngModalChange)="nameChange()" /> </div>
"@angular/forms"에서 { FormControl, FormGroup } 가져오기
내보내기 클래스 AppComponent {
공개 이름 = 'a';
공개 이름변경() {
}
} Angular는 공식적으로 ngModalChange 사용을 권장하지 않습니다.
2.8.2 양식 제어
<div [formGroup]="contactForm"> <input type="text" formControlName="이름" /> </div>
"@angular/forms"에서 { FormControl, FormGroup } 가져오기
내보내기 클래스 AppComponent {
contactForm: FormGroup = 새 FormGroup({
이름: 새 FormControl()
})
ngOnInt() {
this.contactForm.get("name").valueChanges.subscribe(data => {
console.log(데이터);
}
}
} 2.9 연습
1) 체크박스 그룹에서 선택한 값 가져오기
<form [formGroup]="form" (submit)="onSubmit()">
<label *ngFor="데이터 항목 허용">
<input type="checkbox" [value]="item.value" (change)="onChange($event)" />
{{ 항목.이름 }}
</label>
<button>제출</button>
</form> "@angular/core"에서 { 구성요소 } 가져오기
"@angular/forms"에서 { FormArray, FormBuilder, FormGroup } 가져오기
인터페이스 데이터 {
이름: 문자열
값: 문자열
}
@요소({
선택기: "app-checkbox",
templateUrl: "./checkbox.comComponent.html",
스타일: []
})
내보내기 클래스 CheckboxComponent {
데이터: 배열<데이터> = [
{ 이름: "배", 값: "배" },
{ 이름: "자두", 값: "자두" },
{ 이름: "키위", 값: "키위" },
{ 이름: "사과", 값: "사과" },
{ 이름: "라임", 값: "라임" }
]
양식: FormGroup
생성자(비공개 fb: FormBuilder) {
this.form = this.fb.group({
checkArray: this.fb.array([])
})
}
onChange(이벤트: 이벤트) {
const target = HTMLInputElement로서의 event.target
const 확인 = target.checked
const 값 = target.value
const checkArray = this.form.get("checkArray") as FormArray
if (체크) {
checkArray.push(this.fb.control(값))
} 또 다른 {
const 인덱스 = checkArray.controls.findIndex(
제어 => 제어.값 === 값
)
checkArray.removeAt(색인)
}
}
onSubmit() {
console.log(this.form.value)
}
} 2) 라디오 버튼
내보내기 클래스 AppComponent에서 선택한 값을 가져옵니다.
양식: FormGroup
생성자(공개 fb: FormBuilder) {
this.form = this.fb.group({ 성별: "" })
}
onSubmit() {
console.log(this.form.value)
}
} <form [formGroup]="form" (제출)="onSubmit()"> <input type="radio" value="male" formControlName="gender" /> 남성 <input type="radio" value="female" formControlName="gender" /> 여성 <button type="submit">제출</button> </form>
2.10 기타
patchValue: 양식 컨트롤의 값을 설정합니다(모두 설정할 수도 있고, 그 중 하나만 설정할 수도 있으며, 나머지는 영향을 받지 않음)
setValue: 양식 컨트롤의 값을 설정합니다(모두 설정, 제외할 수 없음) 어느 하나)
valueChanges: 양식이 변경될 때 재설정 이벤트가 트리거됩니다. 컨트롤 값이 변경되면
양식 내용이 숨겨집니다.