Как быстро приступить к работе с VUE3.0: ввод для изучения
Angular предоставляет два разных метода обработки пользовательского ввода через формы:响应式表单и模板驱动表单. [Рекомендация по соответствующему учебнику: «Учебное пособие по Angular»]
Здесь представлены только адаптивные формы. Для форм на основе шаблонов посетите официальный сайт:
https://angular.cn/guide/forms-overview#setup-in-template-driven-forms.
Чтобы использовать элемент управления адаптивной формой, вам необходимо импортировать ReactiveFormsModule из пакета @angular/forms и добавить его в массив imports вашего NgModule . Следующим образом: app.module.ts
/***** app.module.ts *****/
импортировать {ReactiveFormsModule} из '@angular/forms';
@NgModule({
импорт: [
// другой импорт...
ReactiveFormsМодуль
],
})
класс экспорта AppModule { } Чтобы использовать элемент управления формой, необходимо выполнить три шага.
Зарегистрируйте модуль реактивной формы в своем приложении. Этот модуль объявляет некоторые директивы, которые вы хотите использовать в реактивных формах.
Создайте новый экземпляр FormControl и сохраните его в компоненте.
Зарегистрируйте этот FormControl в шаблоне.
Чтобы зарегистрировать элемент управления формой, импортируйте класс FormControl и создайте новый экземпляр FormControl , сохранив его как свойство класса. Следующим образом: test.component.ts
/***** test.comComponent.ts *****/
импортировать {компонент} из '@angular/core';
импортировать { FormControl } из '@angular/forms';
@Компонент({
селектор: 'редактор имени приложения',
templateUrl: './name-editor.comComponent.html',
styleUrls: ['./имя-редактор.компонент.css']
})
класс экспорта TestComponent {
// Вы можете установить начальное значение в конструкторе FormControl, в данном примере это пустая строка name = new FormControl('');
} Затем зарегистрируйте элемент управления в шаблоне следующим образом: test.component.html
<!-- test.comComponent.html -->
<метка>
Имя: <input type="text" [formControl]="name">
</метка>
<!-- Если значение, введенное во входных данных, изменится, отображаемое здесь значение также изменится -->
<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';
импортировать { FormControl, FormGroup, Валидаторы } из '@angular/forms'
@Компонент({
селектор: 'app-test',
templateUrl: './test.comComponent.html',
styleUrls: ['./test.comComponent.css']
})
класс экспорта TestComponent реализует OnInit {
конструктор() {}
ProfileForm = новая FormGroup({
firstName: новый FormControl('', [Validators.required,Validators.pattern('[a-zA-Z0-9]*')]),
LastName: новый FormControl('', Validators.required),
});
onSubmit() {
// Проверяем значения каждого поля в группе управления console.log(this.profileForm.value)
}
} <!-- ProfileForm Эта группа форм привязана к элементу формы посредством директивы FormGroup, создавая уровень связи между моделью и полем ввода в форме -->
<!-- Директива FormGroup также прослушивает событие отправки, создаваемое элементом формы, и генерирует событие ngSubmit, позволяющее привязать функцию обратного вызова. -->
<form [formGroup]="profileForm" (ngSubmit)="onSubmit()">
<метка>
<!-- Директива FormControlName привязывает каждое поле ввода к элементу управления формой FormControl, определенному в FormGroup. Эти элементы управления формой будут взаимодействовать с соответствующими элементами -->
Имя: <input type="text" formControlName="firstName">
</метка>
<метка>
Фамилия: <input type="text" formControlName="lastName">
</метка>
<button type="submit" [disabled]="!profileForm.valid">Отправить</button>
</форма>
<p>{{ ProfileForm.value }}</p>
<!-- Статус контрольной группы: НЕДЕЙСТВИТЕЛЬНО или ДЕЙСТВИТЕЛЬНО -->
<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
импортировать { FormBuilder, Валидаторы } из '@angular/forms';
@Компонент({
селектор: 'app-test',
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]*')]],
LastName: ['', Validators.required],
});
// Эквивалент // ProfileForm = new FormGroup({
// firstName: новый FormControl('', [Validators.required,Validators.pattern('[a-zA-Z0-9]*')]),
// LastName: новый FormControl('', Validators.required),
// });
onSubmit() {
console.log(this.profileForm.value)
console.log(this.profileForm)
}
} Для сравнения можно обнаружить, что использование службы FormBuilder позволяет более удобно генерировать FormControl , FormGroup и FormArray без необходимости каждый раз вручную создавать new экземпляр.
Полный список API валидаторов классов
Validatorsсм. в руководстве по APIhttps://angular.cn/api/forms/Validators.
Функция валидатора ( Validators ) может быть синхронной или асинхронной функцией.
FormControl .Promise или Observable , который позже выдает набор ошибок проверки или значение NULL. Их можно передать в качестве третьего параметра при создании экземпляра FormControl .По соображениям производительности Angular не будет запускать асинхронные валидаторы до тех пор, пока не пройдут все синхронные валидаторы. Эти ошибки проверки устанавливаются после выполнения каждого асинхронного средства проверки.
https://angular.cn/api/forms/Validators
class Validators {
static min(min:number): ValidatorFn // Минимальное значение, которое можно ввести static max(max:number): ValidatorFn // Максимальное значение static require(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 template(pattern: string | RegExp): ValidatorFn // Обычное совпадение static nullValidator(control: AbstractControl): ValidationErrors | null // Ничего не делать static compose(validators: ValidatorFn[]): ValidatorFn |
статический composeAsync (валидаторы: AsyncValidatorFn []): AsyncValidatorFn |
} import { Validators } from '@angular/forms' при создании экземпляра элемента управления FormControl
...
ngOnInit(): пустота {
this.heroForm = новая FormGroup({
// Создание экземпляра имени элемента управления FormControl: new FormControl(this.hero.name, [
Validators.required, // Требуется валидация Validators.minLength(4), // Длина не меньше 4
запрещеноNameValidator(/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, [
Валидаторы.обязательны,
Валидаторы.minLength(4),
// 1. Добавляем собственный валидатор запрещенногоNameValidator(/bob/i)
])
});
}
// 2. Реализовать собственный валидатор, функция которого заключается в запрете ввода значений с помощью функции экспорта строки bob запрещенногоNameValidator(nameRe: RegExp): ValidatorFn {
return (управление: AbstractControl): ValidationErrors null => {
const запрещено = nameRe.test(control.value);
// 3. Вернуть ноль, если значение допустимо, или вернуть объект ошибки проверки, если оно недействительно. return запрещено ? {forbiddenName: {value: control.value}} : null;
};
} Валидатор возвращает
null, если значение допустимо, или验证错误对象если оно недействительно. Объекты ошибок аутентификации обычно имеют атрибут, называемый ключом аутентификации (forbiddenName). Его значением является произвольный словарь, который можно использовать для вставки сообщений об ошибках ({name}).
Добавляйте собственные валидаторы в формы на основе шаблонов. Чтобы добавить директиву в шаблон, директива содержит функцию validator . В то же время эта директива должна зарегистрироваться в качестве поставщика NG_VALIDATORS . Как показано ниже:
// 1. Импортируйте связанные классы import { NG_VALIDATORS, Validator, AbstractControl, ValidationErrors } из '@angular/forms';
импортировать {Input} из '@angular/core'
@Директива({
селектор: '[appForbiddenName]',
// 2. Зарегистрируйтесь в качестве поставщика токенов NG_VALIDATORS: [{provide: NG_VALIDATORS, useExisting: ForbiddenValidatorDirective, multi: true}]
})
класс экспорта ForbiddenValidatorDirective реализует Validator {
@Input('appForbiddenName') запрещенное имя = '';
// 3. Реализовать интерфейс валидатора, то есть реализовать функцию проверки validate(control: AbstractControl): ValidationErrors | null {
// Возвращаем значение null, если значение допустимо, или возвращаем объект ошибки проверки, если оно недействительно. return this.forbiddenName ?
: нулевой;
}
}
// 4. Пользовательская функция экспорта функции проверки запрещеноNameValidator(nameRe: RegExp): ValidatorFn {
return (управление: AbstractControl): ValidationErrors null => {
const запрещено = nameRe.test(control.value);
// 3. Вернуть ноль, если значение допустимо, или вернуть объект ошибки проверки, если оно недействительно. return запрещено ? {forbiddenName: {value: control.value}} : null;
};
} Обратите внимание, что пользовательские директивы проверки создаются с помощью
useExistingвместоuseClass. Если вместоuseExistingиспользуетсяuseClass, новый экземпляр класса будет зарегистрирован, но у него не будетforbiddenName.
<input type="text" требуется appForbiddenName="bob" [(ngModel)]="hero.name">