В Angular существует два типа форм:模板驱动и模型驱动. [Рекомендуемые соответствующие учебные пособия: «Учебное пособие по Angular»]
1.1 Обзор
控制逻辑формой написана в组件模板, который подходит для简单типов форм.
1.2 Быстрое начало работы
1). Представьте зависимый модуль FormsModule
import { FormsModule } из "@angular/forms".
@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) Получите значение поля формы
import { NgForm } из "@angular/forms"
класс экспорта 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> импортировать { NgForm } из "@angular/forms"
класс экспорта AppComponent {
onSubmit (форма: NgForm) {
console.log(form.value) // {contact: {phone: ''}, user: {username: ''}}
}
} 1.3 Требуется проверка формы
<form #f="ngForm" (submit)="onSubmit(f)"> <input type="text" name="username" ngModel требуемый шаблон="d" /> <button>Отправить</button> </form>
класс экспорта AppComponent {
onSubmit (форма: NgForm) {
// Проверяем, проверена ли вся форма, через console.log(form.valid)
}
} <!-- Отключить отправку формы, если вся форма не проходит проверку --> <button type="submit" [disabled]="f.invalid">Отправить</button>
отображает сообщение об ошибке, когда элемент формы не удается выполнить в шаблоне компонента.
<form #f="ngForm" (submit)="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 {
граница: 2 пикселя, сплошная красная;
} 2.1 Обзор
控制逻辑формой написана в组件类, который имеет больший контроль над логикой проверки и подходит для复杂типов форм.
В форме, управляемой моделью, поле формы должно быть экземпляром класса FormControl . Объект экземпляра может验证表单字段, было ли оно изменено и т. д.
Набор полей формы составляет всю форму, и вся форма должна быть экземпляром класса FormGroup , который может выполнять整体проверку формы.
FormControl: элемент формы в группе форм.
FormGroup: форма. FormGroup
: используется для сложных форм. Во время проверки формы можно добавлять один элемент в FormArray. терпит неудачу и все терпит неудачу.
2.2 Быстро приступить к работе
1) представить ReactiveFormsModule
import { ReactiveFormsModule } из "@angular/forms"
@NgModule({
импорт: [ReactiveFormsModule]
})
класс экспорта AppModule {} 2). Создайте объект управления формой FormGroup в классе компонента
import { FormControl, FormGroup } из "@angular/forms"
класс экспорта AppComponent {
contactForm: FormGroup = новая FormGroup({
имя: новый FormControl(),
телефон: новый FormControl()
})
} 3) Форма в шаблоне связанного компонента
<form [formGroup]="contactForm" (submit)="onSubmit()"> <input type="text" formControlName="name" /> <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="fullName">
<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(["имя", "имя пользователя"])?.значение)
} 2.3 Требования FormArray
: группа контактной информации отображается на странице по умолчанию, и дополнительные группы контактной информации можно добавить, нажав кнопку.
import { Component, OnInit } из "@angular/core"
импортировать { FormArray, FormControl, FormGroup } из "@angular/forms"
@Компонент({
селектор: "app-root",
templateUrl: "./app.comComponent.html",
стили: []
})
класс экспорта AppComponent реализует OnInit {
// форма контактной формы: FormGroup = новая FormGroup({
контакты: новый FormArray([])
})
получить контакты() {
верните this.contactForm.get("контакты") как 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" (submit)="onSubmit()">
<div formArrayName="контакты">
<дел
*ngFor="позволить контакту contact.controls; пусть i = index"
[formGroupName]="я"
>
<input type="text" formControlName="name" />
<input type="text" formControlName="address" />
<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 } из "@angular/forms"
contactForm: FormGroup = новая FormGroup({
имя: новый FormControl("Значение по умолчанию", [
Валидаторы.обязательны,
Валидаторы.minLength(2)
])
}) 2) Узнать, прошла ли вся форма проверку
onSubmit() {
console.log(this.contactForm.valid)
} <!-- Отключить кнопки формы, если вся форма не проходит проверку --> <button [disabled]="contactForm.invalid">Отправить</button>
3) Отображение сообщения об ошибке при прохождении проверки в шаблоне компонента
get name() {
верните this.contactForm.get("имя")!
} <form [formGroup]="contactForm" (submit)="onSubmit()">
<input type="text" formControlName="name" />
<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 Пользовательский валидатор синхронной формы
Тип пользовательского валидатора — класс TypeScript
. Этот класс содержит определенные методы проверки. Метод проверки должен быть статическим методом.
Метод проверки имеет элемент управления типа AbstractControl. Фактически это тип объекта экземпляра класса FormControl.
Если проверка прошла успешно, возвращается значение null.
Если проверка не удалась, объект возвращается. Атрибут в объекте является идентификатором проверки, а значение равно. true, что указывает на то, что проверка не удалась.
Возвращаемое значение метода проверки — ValidationErrors | null
import { AbstractControl, ValidationErrors } from "@angular/forms".
класс экспорта NameValidators {
// Значения полей не могут содержать пробелы static couldContainSpace(control: AbstractControl): ValidationErrors null {
// Проверка не удалась, если (/s/.test(control.value)) return { canContainSpace: true }
//Проверка пройдена, возвращаем ноль
}
} импортировать { NameValidators } из "./Name.validators"
contactForm: FormGroup = новая FormGroup({
имя: новый FormControl("", [
Валидаторы.обязательны,
NameValidators.cannotContainSpace
])
}) <div *ngIf="name.touched && name.invalid && name.errors"> <div *ngIf="name.errors.cannotContainSpace">Имя не может содержать пробелы</div> </div>
2.6 Пользовательский импорт валидатора асинхронной формы
{ AbstractControl, ValidationErrors } из "@angular/forms"
импортировать { Observable } из "rxjs"
класс экспорта NameValidators {
static mustBeUnique (control: AbstractControl): Promise<ValidationErrors null> {
вернуть новое обещание (решить => {
if (control.value == "admin") {
разрешить ({ mustBeUnique: 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. Элемент не выполнен, и все в целом не удалось.
импортировать { FormBuilder, FormGroup, Валидаторы } из "@angular/forms"
класс экспорта AppComponent {
контактная форма: FormGroup
конструктор (частный фб: 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>
import { FormControl, FormGroup } из "@angular/forms"
класс экспорта AppComponent {
публичное имя = 'а';
публичное имяChange() {
}
} Angular официально не рекомендует использовать ngModalChange.
2.8.2 Элемент управления формой
<div [formGroup]="contactForm"> <input type="text" formControlName="name" /> </div>
import { FormControl, FormGroup } из "@angular/forms"
класс экспорта AppComponent {
contactForm: FormGroup = новая FormGroup({
имя: новый FormControl()
})
нгОнИнт() {
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)" />
{{ item.name }}
</метка>
<button>Отправить</button>
</form> импортировать {компонент } из "@angular/core"
импортировать { FormArray, FormBuilder, FormGroup } из "@angular/forms"
Данные интерфейса {
имя: строка
значение: строка
}
@Компонент({
селектор: "app-checkbox",
templateUrl: "./checkbox.comComponent.html",
стили: []
})
класс экспорта CheckboxComponent {
Данные: Массив<Данные> = [
{ name: "Груша", значение: "груша" },
{ name: "Слива", значение: "слива" },
{ name: "Киви", значение: "киви" },
{ name: "Apple", значение: "apple" },
{ name: "Лайм", значение: "Лайм" }
]
форма: ФормГрупп
конструктор (частный фб: FormBuilder) {
this.form = this.fb.group({
checkArray: this.fb.array([])
})
}
onChange (событие: Событие) {
const target = event.target как HTMLInputElement
const проверено = target.checked
константное значение = target.value
const checkArray = this.form.get("checkArray") как FormArray
если (проверено) {
checkArray.push(this.fb.control(значение))
} еще {
константный индекс = checkArray.controls.findIndex(
control => control.value === значение
)
checkArray.removeAt(индекс)
}
}
onSubmit() {
console.log(this.form.value)
}
} 2) Получите значение, выбранное в классе экспорта переключателя
AppComponent {
форма: ФормГрупп
конструктор (общественный фб: FormBuilder) {
this.form = this.fb.group({пол: "" })
}
onSubmit() {
console.log(this.form.value)
}
} <form [formGroup]="form" (submit)="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: Когда форма. Событие сброса запускается, когда значение элемента управления изменяется
: содержимое формы пустое.