Я работаю над проверкой реактивной формы Angular. В моей текущей структуре есть только validation.required, и мне нужны дополнительные проверки для настройки, но я изо всех сил пытаюсь это сделать. Мне нужна проверка для - minLength, - электронная почта и - почтовый индекс
Я создаю форму динамически из данных json.
@Injectable()
export class QuestionControlService {
constructor() { }
toFormGroup(questions: QuestionBase<any>[] ) {
let group: any = {};
questions.forEach(question => {
group[question.key] = question.required ? new FormControl(question.value || '', Validators.required)
: new FormControl(question.value || '');
// need help here for forms.
});
return new FormGroup(group);
}
}
export class QuestionBase<T>{
key: string;
label: string;
required: boolean;
minLength:number;
order: number;
controlType: string;
constructor(options: {
key?: string,
label?: string,
required?: boolean,
minLength?:number,
order?: number,
controlType?: string,
} = {}) {
this.key = options.key || '';
this.label = options.label || '';
this.required = !!options.required;
this.minLength = options.minLength;
this.order = options.order === undefined ? 1 : options.order;
this.controlType = options.controlType || '';
}
}
также мне нужно настраивать ошибку проверки в соответствии с ее типом, в настоящее время есть только для обязательных! как в следующем коде
<div [ngSwitch] = "question.controlType">
<div *ngSwitchCase = "'textbox'"> <small>textbox</small>
<div class = "form-group">
<input *ngSwitchCase = "'textbox'"
[formControlName] = "question.key"
[id] = "question.key"
[type] = "question.type"
[(ngModel)] = "question.value"
(keyup.enter) = "onChangeValue($event, previousValue, responseId, question.key, 'textbox'); previousValue = question.value"
(blur) = "onChangeValue($event, previousValue, responseId, question.key, 'textbox'); previousValue = question.value"
(focus) = "previousValue=question.value"
>
<span></span>
</div>
</div>
<div class = "errorMessage" *ngIf = "!isValid">{{question.label}} is required</div>
</div>





FormControl принимает либо один валидатор, либо массив валидаторов (ValidatorFn | ValidatorFn[]). Вы можете передать несколько валидаторов в виде массива.
class FormControl extends AbstractControl {
constructor(formState: any = null,
validatorOrOpts?: ValidatorFn | ValidatorFn[] | AbstractControlOptions | null,
asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[] | null)
new FormControl(question.value || '', [Validators.required, Validators.minLength(5)])
Вот пример кода из угловых документов, показывающий несколько сообщений об ошибках:
<input id = "name" class = "form-control"
formControlName = "name" required >
<div *ngIf = "name.invalid && (name.dirty || name.touched)"
class = "alert alert-danger">
<div *ngIf = "name.errors.required">
Name is required.
</div>
<div *ngIf = "name.errors.minlength">
Name must be at least 4 characters long.
</div>
<div *ngIf = "name.errors.forbiddenName">
Name cannot be Bob.
</div>
</div>
вот как я модифицировал
@Injectable()
export class QuestionControlService {
constructor() { }
toFormGroup(questions: QuestionBase<any>[] ) {
let group: any = {};
questions.forEach(question => {
var validations: ValidatorFn[] = [];
if (question.required) {
validations.push(Validators.required)
}
if (question.minLength)
{
validations.push(Validators.minLength(question.minLength))
}
group[question.key] = new FormControl(question.value || '', validations);
});
return new FormGroup(group);
}
}
if (questionElementType= = "textbox")
{
let _textBox = new TextboxQuestion({
consultationId: questionsList[key].consultationId,
questionId: questionsList[key].questionId,
questionElementType: questionsList[key].questionElementType[0].title,
questionType: questionsList[key].questionType,
title:questionsList[key].title,
displayId: questionsList[key].displayId,
key: questionsList[key].questionId,
label: questionsList[key].title,
value: questionsList[key].answer.length<=0? null : questionsList[key].answer[0].answerValue,
required: true,
minLength:8,
order: 5
});
this.mappedQuestions.push(_textBox);
}
Почему у вас есть
formControlNameи[(ngModel)]в одном элементеinput? Вы можете удалить[(ngModel)], так как используете реактивную форму.