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

Question

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

1

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

Я думаю, что знаю, в чем проблема, но не знаю, как это исправить. У меня есть специальный валидатор (не совсем обычай, я использую 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 - это два выпадающих min_score, где вы можете выбрать номер.

Я хочу достичь этого:

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 не доступно, когда инициализируется построитель форм.

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

Я даже попытался поставить 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)]]

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

Какое обходное решение для этой проблемы?

AJ989 23 окт. 2018, в 15:12

Источник

0

это не max_score вместо this.myForm.get("max_points").value) же самое относится и к min_points
Suryan 23 окт. 2018, в 12:24
0

извините, это была просто опечатка здесь в stackoverflow, в моем коде это max_score везде! так что это не так
AJ989 23 окт. 2018, в 12:27

Теги:

angular

angular6

javascript

forms

formbuilder

3 ответа

Ещё вопросы

это не max_score вместо this.myForm.get("max_points").value) же самое относится и к min_points
извините, это была просто опечатка здесь в stackoverflow, в моем коде это max_score везде! так что это не так

Giwrgos Lampadaridis · Answer 1 · 2018-10-23T14-12-00.000Z

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

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

firegloves · Answer 2 · 2018-10-23T10-57-00.000Z

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

Поэтому, если вы используете выражение типа

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

вы оцениваете при создании формы. Таким myForm переменная 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 вы customValidator доступ к данным myForm, myForm доступным для его элементов управления.

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

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

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

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

где f - метод удобного геттера, подобный этому:

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

да, я понял, вот почему я попытался использовать функцию вместо этого: getMaxScore (): number {if (this.myForm.get ("max_score"). value) {return this.detailsForm.get ("max_score"). стоимость; } еще вернуть 6; } поэтому, если myForm по-прежнему не определен, он вернет число «6», поэтому валидатор будет иметь значение, но оно не работает, я получаю ту же ошибку, на этот раз в строке созданной мной функции, так Как я могу просто иметь валидатор, как это не позволяет моему min_score быть выше, чем мой max_score, и наоборот
да, но в вашей функции вы обращаетесь к myForm, поэтому он все еще не определен :)
да, я знаю, но как я могу решить это тогда? в конце концов мне нужно получить доступ к этим значениям в myForm, чтобы проверить значение и проверить, если min_score <max_score, какое тогда другое решение?
хорошо, что если я сделаю это так, как вы, с minVal и maxVal для инициализации, то я использую myForm.get ("max_score"). valueChanges и подписываюсь на него в ngOnInit, поэтому, когда изменение там сделано, я делаю : maxVal = myForm.get ("max_score"). значение
давайте попробуем мое новое решение
Я попробую это через секунду, в то время как я попробовал решение, которое я написал в верхнем комментарии, minVal и maxVal динамически изменяются при подписке на изменения, но валидатор просто не работает, я могу поставить минимальное значение выше, чем макс, и валидатор не пинает
параметры валидатора являются статическими. они всегда будут иметь одинаковое значение
о, хорошо, реализуя ваше решение прямо сейчас, могу я спросить вас, для чего нужны minPoints?
ммм возможно я добавил это по ошибке. однако дело в том, что вы можете получить доступ ко всем полям myForm таким образом
customValidator (): any {return (group: FormGroup) => {const minScore = group.controls ["min_score"], maxScore = group.controls ["max_score"]; if (minScore> maxScore) {return minScore.setErrors ({notMatching: true}); } else {return (minScore.setErrors (null)); }}; } Я сделал это, добавил валидаторы в Form Builder в качестве вашего примера, я не получаю ошибок, но валидатор просто не работает! Я могу поставить min_score выше, чем max_score, и я не получу красного подчеркивания в моем раскрывающемся меню (что произойдет, если я добавлю фиксированные значения в валидаторы, например 1 и 6)
Я не могу попробовать это сейчас, это только пример. если вы отлаживаете выполнение правильно?
очевидно, в вашем шаблоне вам нужно управлять errorm в этом случае notMatching error
о хорошо, ничего не изменилось в шаблоне, каков правильный синтаксис? Я думаю, мне придется создать <div> с ngIf? и внутри div - строка, содержащая что-то вроде: значение должно быть выше, чем максимальная оценка. Сейчас же, попробую завтра и отмечу ваш ответ как хороший, так как я уверен, что это сработает! благодарю вас

fateme fazli · Answer 3 · 2018-10-23T09-28-00.000Z

0

так должно быть:

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

fateme fazli 23 окт. 2018, в 09:28

0

Я не вижу, в чем он решает проблему ОП, чтобы убедиться, что мин <макс.
Walfrat 23 окт. 2018, в 12:31
0

единственное, что изменилось в вашем решении, это то, что вы перенесли мою инициализацию Formbuilder в конструктор !! Ничего не меняет, я пытался переместить его в конструкторе и в NgOnInit, та же ошибка
AJ989 23 окт. 2018, в 12:31
0

@ AJ989 вы получаете неопределенную ошибку, поэтому вы делаете неправильное определение формы, вы можете попробовать это, затем сказать, помогает или нет, также проверьте это
Fateme Fazli 23 окт. 2018, в 12:36
0

@fatemefazli Я попробовал это, я объявил переменную myForm и инициализировал ее в конструкторе, затем я также попытался использовать другую версию, this.myForm.controls [...] Но я получаю ту же ошибку TypeError: Не удается прочитать свойство «элементы управления» из неопределенного
AJ989 23 окт. 2018, в 12:39
0

И ofc В объявлении формы, где находятся валидаторы, я не ушел: Validators.max (6), который работает, конечно, как я писал в своем OP, я поместил this.myForm.get ("max_score ") .value там, и это дает ошибку
AJ989 23 окт. 2018, в 12:40

Показать ещё 3 комментария