Уровень компонента

В этом случае действие сервиса ограничено текущим компонентом. Для каждого объекта компонента создается свой объект сервиса. Сам сервис добавляется также в коллекцию providers компонента:

import { Component} from '@angular/core';

import {DataService} from './data.service';

        

@Component({

    selector: 'data-comp',

    template: `<div>

        <div>

            <input [(ngModel)]="name" placeholder = "Модель" />

            <button (click)="addItem(name, price)">Добавить</button>

        </div>

        <table>

            <tr *ngFor="let item of items">

                <td>{{item}}</td>

            </tr>

        </table>

    </div>`,

    providers: [ DataService ] // добавлениемодуля DataService

})

export class DataComponent{

      

    items: string[] = [];

    constructor(private dataService: DataService){}

      

    addItem(name: string){ this.dataService.addData(name); }

    ngOnInit(){ this.items = this.dataService.getData(); }

}

Билет17 Не то

С помощью какого модуля и его директивы производится работа с формами? Опишите логику работы данного модули и директивы.

Каким образом производится валидация форм? Опишите необходимые инструменты и пример их использования.

Работа с формами производится с помощью модуля FormsModule и директивы ngModel. Эта директива с помощью переданной модели создает объект FormControl и привязывает эту модель к созданному элементу формы. Объект FormControl отслеживает значение модели, а также отвечает за валидацию этого значения и взаимодействие с пользователем.

Валидация осуществляется с помощью списка статических методов класса Validators, проверяющих соответствие инпута определенным условиям. Мы используем следующие:

· Validators.required - делает контрол обязательным для заполнения;

· Validators.email - валидация эл. адреса;

· Validators.minLength - минимальная длина вводимой строки;

Также используется типичная проверка пароля с полем подтверждающего пароля.

Билет 18

Что такое binding или двухстороннее связывание, как оно реализовано в вашей курсовой работе?

Двусторонняя привязка позволяет динамически менять значения на одном конце привязки при изменениях на другом конце.

Квадратные скобки привязывают свойства, а круглые - события. Как правило, двусторонняя привязка применяется при работе с элементами ввода, например, элементами типа input. Для двусторонней привязки в input’е используется директива ngModel в виде:

[(ngModel)] = “выражение”

Вывод переменной в шаблоне: {{выражение}}.

В курсовой работе binding используется в формах авторизации, работа с формами осуществляется в реактивном стиле (модули ReactiveFormsModule и FormsModule).

Привязка свойства formGroup к выражению, напримерform: [formGroup]= “form”. Используется для дальнейшей обработки полей в компоненте.

Привязка события ngSubmit к нашей функции/методу, например onSubmit(): (ngSubmit)= “onSubmit()”, т.е. когда мы будем отправлять форму будет вызываться метод onSubmit()

И т.д.

Билет 19

Какие подходы к валидация форм существуют в angular. Опишите их отличие и принцип работы.

Для того чтобы задать валидацию, используются стандартные атрибуты валидации форм HTML5 (required, minlength, max, pattern и т. д.).

<form>

<div>

<label>Bill Amount</label>

<inputtype="number"max="100"required />

</div>

</form>

Вывод сообщений, информирующих о неправильно заполненном поле, осуществляется на основе данных состояния поля. Доступ к этим данным может быть получен с помощью шаблонной переменной.

<form>

<div>

<label>Bill Amount</label>

<input

type="number"

[(ngModel)]="bill.amount"

#amount="ngModel"

max="100"

required

/>

</div>

</form>

Теперь переменная #amount содержит объект с информацией о поле, на которое оно ссылается. Список необходимых для валидации свойств объекта:

• dirty - true, если пользователь осуществлял ввод (выбор) значения;

• touched - true, если поле потеряло фокус;

• invalid - true, если поле невалидно;

• valid - true, если поле валидно;

• errors - содержит объект со свойствами тех атрибутов валидации, которые не удовлетворяют заданному условию.

Общепринято отображать ошибки только тогда, когда пользователь хоть как-то взаимодействовал с полем, то есть когда свойства invalid и dirty или touched ровно true. Вывод той или иной ошибки зависит от того, какой именно атрибут валидации не прошел проверку.

<form>

<div>

<label>Bill Amount</label>

<input

type="number"

[(ngModel)]="bill.amount"

#amount="ngModel"

max="100"

required

/>

<div*ngIf="amount.invalid && (amount.dirty || amount.touched)">

<div*ngIf="amount.errors.required">

Required field

</div>

<div*ngIf="amount.errors.max">

Max possible value is 100

</div>

</div>

</div>

</form>

Валидация реактивных форм Angular

Для реактивных форм вся валидация устанавливается в классе компонента при описании модели формы. Каждому полю задается свой массив валидаторов.

Список встроенных валидаторов (Angular validators):

• required - поле обязательно для заполнения;

• email - проверка валидности email;

• min(min: number) - минимальное возможное значение;

• max(max: number) - максимальное возможное значение;

• minLength(minLength: number) - минимальная длина вводимой строки;

• maxLength(maxLength: number) - максимальная длина вводимой строки;

• pattern(pattern: string | RegExp) - регулярное выражение, которому должно соответствовать вводимое значение.

reactive-form-validation.ts

@Component({

selector: 'reactive-form-validation',

templateUrl: './reactive-form-validation.component.html'

})

exportclassReactiveFormValidationComponent {

clientForm: FormGroup

constructor(privatefb: FormBuilder) {

this._createForm()

}

private_createForm() {

this.clientForm = this.fb.group({

client: ['', [Validators.required]],

clientAge: [

'',

[

Validators.required,

Validators.min(16),

Validators.pattern(/^[0-9]+(?!.)/)

]

]

})

}

get_client() {

returnthis.clientForm.get('client')

}

get_clientAge() {

returnthis.clientForm.get('clientAge')

}

}

reactive-form-validation.html

<form[formGroup]="clientForm"novalidate>

<div>

<label>Client</label>

<inputtype="text"formControlName="client" />

<div*ngIf="_client.invalid && (_client.touched || _client.dirty)">

<span*ngIf="_client.errors?.required">Field is required</span>

</div>

</div>

<div>

<label>Age</label>

<inputtype="text"formControlName="clientAge" />

<div*ngIf="_clientAge.invalid && (_clientAge.touched || _clientAge.dirty)">

<span*ngIf="_clientAge.errors?.required">Обязательноеполе</span>

<span*ngIf="_clientAge.errors?.min"

>Значение должно быть больше или равно

{{_clientAge.errors?.min.min}}</span

>

<span*ngIf="_clientAge.errors?.pattern?['/^[0-9]+(?!.)/']"

>Разрешаются только цифры</span

>

</div>

</div>

</form>

Механизм вывода ошибок практически аналогичен механизму "стандартных" форм. Но для того чтобы получить в шаблоне ссылку на объект с данными о поле, можно использовать геттеры или реализовать метод, который будет возвращать поле по его имени.

Свойства полученного объекта поля, используемые для валидации:

• dirty - true, если пользователь осуществлял ввод (выбор) значения;

• touched - true, если поле потеряло фокус;

• invalid - true, если поле невалидно;

• valid - true, если поле валидно;

• errors - содержит объект со свойствами тех атрибутов валидации, которые не удовлетворяют заданному условию.

Остановимся на поле errors. Многие Angular validators принимают входные параметры (maxLength, pattern и др.), поэтому для получения исчерпывающей информации о неправильном заполнении полей, к которым они применены, их значения в errors реализованы в виде объектов. В таком объекте содержатся данные о текущем значении и ограничения, накладываемые на это значение (см. пример выше).

Например, ключи объекта ошибки валидатора pattern - сами регулярные выражения. Что позволяет однозначно идентифицировать ошибку и отобразить пользователю соответствующее сообщение.

Более подробное описание можно найти в документации.

Для работы с ошибками в реактивных формах предусмотрены прикладные методы:

• setErrors(errors: ValidationErrors) - используется для того, чтобы задать ошибку вручную;

• getError(errorCode: string) - вернет объект с данными о запрашиваемой ошибке, если поле валидно, то вернется null или undefined;

• hasError(errorCode: string) - вернет true, если поле имеет указанную ошибку.

this.clientForm.get('client').hasError('required')

Для динамического добавления полю валидаторов используется метод setValidators().

this.clientForm.get('client').setValidators([Validators.maxLength(100)])

Чтобы удалить все привязанные к полю Angular validators, необходимовызватьметод clearValidators().

this.clientForm.get('client').clearValidators()

Еще один редко используемый, но крайне полезный метод updateValueAndValidity(), который запускает обновление значения и состояния формы или ее группы (поля).

this.clientForm.get('clientAge').updateValueAndValidity()

Для большинства случаев подойдут встроенные валидаторы, но бывают задачи, которые требуют особых проверок. Поэтому реактивные формы предоставляют инструмент для разработки пользовательских валидаторов.

account.validator.ts

exportfunctionaccountValidator(): ValidatorFn {

return (control: AbstractControl): { [key: string]: boolean } | null => {

letaccountRgEx: RegExp = /^[0-9]{20}(?!.)/

letvalid = !control.value || accountRgEx.test(control.value)

returnvalid ? null : { account: true }

}

}

import {accountValidator} from'./validators/account.validator.ts';

//

accountNumber: ['', [accountValidators()]],

//

В примере accountValidator() проверяет корректность номера банковского счета (20 цифр - проверка условная). Если номер введен не верно, тогда для поля accountNumber будет установлена ошибка account со значением true.

Валидатор всегда должен возвращать null, если переданное значение удовлетворяет всем его проверкам.

Асинхронные валидаторы Angular

Использование механизма асинхронной валидации (Angular async validators) позволяет проверять введенное значение на удаленном сервере. Например, проверка уникальности имени пользователя при регистрации.

Перейдем к практике. Допустим, имеется форма заказа какого-либо товара, где пользователь указывает желаемое его количество. Создадим валидатор checkGoodsLeftValidator(), который будет проверять, имеется ли запрошенное покупателем количество товара.

goods.service.ts

@Injectable({ providedIn: 'root' })

exportclassGoodsService {

constructor(privatehttp: HttpClient) {}

checkGoodsLeft(count: number | string): Observable<any> {

returnthis.http.get('/api/goods/left')

}

}

check-goods-left.validator.ts

exportfunctioncheckGoodsLeftValidator(control: AbstractControl) {

returnthis.checkGoodsLeft(control.value).pipe(

tap(response => {

returnresponse ? null : { goodsLeft: true }

})

)

}

check-goods-left-validator-example.component.ts

@Component({

selector: 'check-goods-left-validator-example',

templateUrl: './check-goods-left-validator-example.component.html'

})

exportclassCheckGoodsLeftValidatorExampleComponent {

orderForm: FormGroup

constructor(privatefb: FormBuilder, privategoodsService: GoodsService) {

this._createForm()

}

private_createForm() {

this.orderForm = this.fb.group({

client: ['', [Validators.required]],

goodsCount: [

'',

[Validators.required],

[checkGoodsLeftValidator.bind(this.goodsService)]

]

})

}

}

Поскольку наш Angular async validator обращается к методу сервиса, а сам валидатор вызывается в контексте компонента, который его использует, здесь используется привязка контекста сервиса GoodsService с помощью bind().