Оглавление:
Карта сайта:
Оглавление:
Карта сайта:
Для создания валидатора можно в компоненте создать обычный метод и передать туда параметр с типом FormControl
checkForLength(control: FormControl){ console.log(control); if(control.value.length <= this.charLength && control.value.length > 0){ return { 'lengthError': true } } return null; }
В данном случае валидатор будет вычислять количество минимальных символов.
Далее метод надо передать в массив валидаторов FormControl
pass: new FormControl('', [Validators.required, this.checkForLength.bind(this)]),
для того чтобы не потерять this.charLength, переменная в которой задается минимальное колличество символов, нужно при инициализации валидатора биндить this
чтобы отобразить ошибки нужно обратится к контроллу подобным образом
<input type="password" class="form-control" formControlName="pass"> <p class="help-block" *ngIf="form.get('user.pass').invalid && form.get('user.pass').touched && form.get('user.pass').errors['required']">пароль не должен быть пустым!</p> <p class="help-block" *ngIf="form.get('user.pass').invalid && form.get('user.pass').touched && form.get('user.pass').errors['lengthError']">пароль не должен быть меньше {{charLength}} символов!</p>
В конечном итоге мы получим что то вроде этого
import { Component, OnInit } from '@angular/core'; import {FormControl, FormGroup, Validators} from '@angular/forms'; @Component({ selector: 'app-root', templateUrl: './app.component.html' }) export class AppComponent implements OnInit { answers = [{ type: 'yes', text: 'Да' }, { type: 'no', text: 'Нет' }]; form: any; charLength:number = 4; ngOnInit() { this.form = new FormGroup( { user: new FormGroup({ email: new FormControl('anchikin@mail.ru', [Validators.email, Validators.required]), pass: new FormControl('', [Validators.required, this.checkForLength.bind(this)]), }), country: new FormControl('ru'), answer: new FormControl('no') } ); } checkForLength(control: FormControl){ console.log(control); if(control.value.length <= this.charLength && control.value.length > 0){ return { 'lengthError': true } } return null; } onSubmit() { console.log('Submited!', this.form); } }
<div class="col-xs-8 col-xs-offset-2"> <form [formGroup]="form" (ngSubmit)="onSubmit()"> <div formGroupName="user"> <div class="form-group" [ngClass]="{'has-error': form.get('user.email').invalid && form.get('user.email').touched}"> <label>Email</label> <input type="text" class="form-control" formControlName="email"> <p class="help-block" *ngIf="form.get('user.email').invalid && form.get('user.email').touched">Не правильно прописан email</p> </div> <div class="form-group" [ngClass]="{'has-error': form.get('user.pass').invalid && form.get('user.pass').touched}"> <label>Пароль</label> <input type="password" class="form-control" formControlName="pass"> <p class="help-block" *ngIf="form.get('user.pass').invalid && form.get('user.pass').touched && form.get('user.pass').errors['required']">пароль не должен быть пустым!</p> <p class="help-block" *ngIf="form.get('user.pass').invalid && form.get('user.pass').touched && form.get('user.pass').errors['lengthError']">пароль не должен быть меньше {{charLength}} символов!</p> </div> </div> <div class="form-group"> <label>Выберите страну</label> <select class="form-control" formControlName="country"> <option value="ru">Россия</option> <option value="by">Белоруссия</option> <option value="ua">Украина</option> </select> </div> <div class="radio" *ngFor="let ans of answers"> <label> <input type="radio" name="answer" formControlName="answer" [value]="ans.type" > {{ans.text}} </label> </div> <button [disabled]="form.invalid" class="btn btn-success" type="submit">Сохранить</button> </form> </div>