Построитель форм - Не удается прочитать свойство 'get' из неопределенного, проблема с валидаторами - PullRequest
Новая
       13

Построитель форм - Не удается прочитать свойство 'get' из неопределенного, проблема с валидаторами

0 голосов
/ 23 октября 2018

В моем проекте Angular 6 есть форма Form Builder, и у меня возникает проблема с валидаторами.

Я думаю, что знаю, в чем проблема, но не знаю, как ее исправить,У меня есть собственный валидатор (не совсем пользовательский, я использую min () и max () с пользовательской переменной для проверки)

И, вероятно, форма инициализируется перед этими значениями.

Форма объявлена ​​перед конструктором (я пытался переместить ее в конструкцию и в ngOnInit, тот же результат) 

myForm = this.fb.group({
        title: [""],
        date: [""],
        max_score: [, [Validators.required, Validators.max(6), Validators.min(1)]],
        min_score: [, [Validators.required, Validators.max(6), Validators.min(1)]]
});

constructor(private fb: FormBuilder) {}

Так все работает, даже валидаторы.max_score и min_score - это 2 выпадающих списка, в которых вы можете выбрать число.

Я хочу достичь следующего: 

max_score: [, [Validators.required, Validators.max(6), Validators.min(this.myForm.get("min_points").value)]],
min_score: [, [Validators.required, Validators.max(this.myForm.get("max_score").value), Validators.min(1)]]

Так что в принципе max_score не может бытьниже, чем min_score, и min_score не может быть выше, чем max_score!

Но это дает мне ошибку: 

TypeError: Cannot read property 'get' of undefined

Так что я думаю, это потому, что this.myForm.get("max_score").value недоступен при инициализации Form Builder.

Как я могу решить эту проблему?Эти значения не являются обязательными в моей форме, поэтому правильно, что они не имеют значения в начале, и я просто хочу поставить проверку, которая позволяет избежать выбора min_value, которое больше, чем max_value

Iдаже пытался поместить this.myForm.get .... в функцию: 

getMaxPoints(): number {
        if (this.myForm.get("max_score").value) {
            return this.myForm.get("max_score").value;
        } else return null;
    }

, а затем 

 min_score: [, [Validators.required, Validators.max(this.getMaxPoints()), Validators.min(1)]]

но я получаю ту же ошибку!

Как обойти эту проблему?

Ответы [ 3 ]

0 голосов
/ 23 октября 2018

должно быть: 

public myForm:FormGroup; // you should do this
constructor(private fb: FormBuilder) {
     this.myForm = this.fb.group({
        title: [''],
        date: [''],
        max_score: ['', [Validators.required, Validators.max(6), Validators.min(1)]],
        min_score: ['', [Validators.required, Validators.max(6), Validators.min(1)]]
     });
}

и доступ к нему: 

this.myForm.get("max_score").value

или: 

this.myForm.controls["max_score"].value
0 голосов
/ 23 октября 2018

Вы можете добавить (keyup)="checkMinMax()" в свой HTML как на мин, так и на макс.В функции checkMinMax вы можете проверить содержимое this.myForm.get("max_score").value и this.myForm.get("min_score").value, либо показать сообщение с * ngIf, как вы упомянули в комментарии, либо заставить значение min или max совпадать с другим, если ввод пользователя превышает его,( или оба ).

Кроме того, вы можете просто использовать необходимый валидатор.

0 голосов
/ 23 октября 2018

Когда вы создаете форму, вы передаете значения в массив валидаторов, значения, которые передаются только во время создания.

Так что если вы используете выражение типа 

Validators.max(this.myForm.get("max_points").value)

, выоценка при создании формы.Таким образом, переменная myForm по-прежнему не определена.

Попробуйте использовать некоторые переменные вместо доступа к myForm свойствам, подобным этому: 

minVal: number = 5;
maxVal: number = 5;

max_score: [, [Validators.required, Validators.max(6), Validators.min(minVal)]],
min_score: [, [Validators.required, Validators.max(maxVal), Validators.min(1)]]

Для проверки данных, получающих некоторые параметры из формы, которую вы должны использоватьдополнительные от this.fb.group()

Вы можете попробовать что-то вроде этого: 

myForm = this.fb.group({
        title: [""],
        date: [""],
        max_score: [, [Validators.required]],
        min_score: [, [Validators.required]]
},
{
       // THIS IS EXTRA!!!!!
       validator: [customValidator()]
});

Это пример customValidator: 

export function customValidator() {
  return (group: FormGroup) => {
    const minScore = group.controls['min_score'],
      maxScore = group.controls['max_core'],
      minPoints = group.controls['min_points'];

    if (/** some condition **/) {
      return minPoints.setErrors({'notMatching': true});
    } else {
      return minPoints.setErrors(null);
    }
  };
}

Обратите внимание, что в customValidator вы получаете доступ к myForm данным, динамически обращающимся к его элементам управления.

Затем в вашем шаблоне вам нужно отобразить ошибки в зависимости от 

<div *ngIf="f.min_points.errors && f.min_points.errors.notMatching">NOT VALID</div>

Я не помню, доступен ли notMatching ошибка, но вы можете распечатать все доступные ошибки с помощью 

<code><pre>{{ f.min_points.errors | json }

, где f - это метод получения удобства, подобный этому: 

 get f() {
    return this.myForm.controls;
  }
...