Как настроить несколько проверок для formGroup в приложении Angular 5

Я работаю над проверкой реактивной формы Angular. В моей текущей структуре есть только validation.required, и мне нужны дополнительные проверки для настройки, но я изо всех сил пытаюсь это сделать. Мне нужна проверка для - minLength, - электронная почта и - почтовый индекс

Я создаю форму динамически из данных json.

служба проверки formGroup

@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>

Почему у вас есть formControlName и [(ngModel)] в одном элементе input? Вы можете удалить [(ngModel)], так как используете реактивную форму.

sabithpocker 16.05.2018 18:27
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
1
1
1 750
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

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);
 }
}

сопоставление данных json с текстовым объектом

 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);

 }

Другие вопросы по теме