Как использовать валидатор для изменения цвета границы formcontrolname в angular

Question 1

У меня есть элемент управления формой, в котором я хочу изменить цвет, когда поле недопустимо, я попробовал следующее, так как большинство примеров делают то же самое:

 <input 
        formControlName="personNameField"
        type="text"
        placeholder="Bitte eingeben"
        [ngClass]="{'error': personNameField.errors}"
        ></input>

Мой ts formcontrol генерируется следующим образом:

    form = this.builder.group({
    personNameField: new FormControl('',
      [Validators.required]),
  });

  getName(){
    this.form.get('personNameField')
  }

Но я получаю следующую ошибку:

ERROR TypeError: Cannot read properties of undefined (reading 'errors')

есть идеи, что я делаю не так?

Обновить: Я добавил геттер и удалил знак вопроса, но все равно граница не работает, отображается только сообщение об ошибке.

Обновление 2:

.error {
    // underline input field on error
    border: 1px solid red;
    display: block;
    color: red;
}

Чего я хочу

Что я получаю

Question 2

Попробуй это.

[ngClass]="{'error': form.get('personNameField')?.errors}"

Question 3

так просто для проверки ввода с помощью класса начальной загрузки : Сначала в вашем HTML-файле у нас есть :

        <div class="form-group">
        <label for="title">title</label>
        <input id="title" type="text" formControlName="title" class="form- 
       control" [ngClass]="{'is-invalid': isCategorySubmitted && 
        categoryFormInfo.title.errors}" />
        </div>

итак, в вашем файле ts :

isCategorySubmitted = false;

initFormBuilder() {
this.categoryForm = this.formBuilder.group({
  title: ['', Validators.required]
});

}

  get categoryFormInfo() {
return this.categoryForm.controls;

}

  submit() {
this.isCategorySubmitted = true;
if (this.categoryForm.invalid) {
  return;
}

  // do your code after the submit

}

таким образом, вы можете так просто проверить вводимые данные .

N.F. · Answer 1 · 2021-11-24T06:51:12

-1

Попробуй это.

[ngClass]="{'error': form.get('personNameField')?.errors}"

N.F.

2021-11-24 06:51:12

эй, спасибо, это продвинуло меня на один шаг вперед, но теперь вокруг метки и ввода есть только один большой прямоугольник. Я только хочу изменить цвет границы у вас есть идея о том, как изменить мой scss? Я обновил свой код

natyus

Извините, я не могу понять, что вы пытаетесь сделать. Пожалуйста, покажите с изображением.

N.F.

Я действительно добавил фотографии

natyus

Ваш html-код в этом посте не имеет метки. Пожалуйста, обновите свой пост, чтобы он включал всю часть "Что я получаю".

N.F.

Seyed-Amir-Mehrizi · Answer 2 · 2021-11-24T07:22:10

так просто для проверки ввода с помощью класса начальной загрузки : Сначала в вашем HTML-файле у нас есть :

        <div class="form-group">
        <label for="title">title</label>
        <input id="title" type="text" formControlName="title" class="form- 
       control" [ngClass]="{'is-invalid': isCategorySubmitted && 
        categoryFormInfo.title.errors}" />
        </div>

итак, в вашем файле ts :

isCategorySubmitted = false;

initFormBuilder() {
this.categoryForm = this.formBuilder.group({
  title: ['', Validators.required]
});

}

  get categoryFormInfo() {
return this.categoryForm.controls;

}

  submit() {
this.isCategorySubmitted = true;
if (this.categoryForm.invalid) {
  return;
}

  // do your code after the submit

}

таким образом, вы можете так просто проверить вводимые данные .

Как использовать валидатор для изменения цвета границы formcontrolname в angular

Вопрос

На других языках

Эта страница на других языках

Популярное в этой категории

Популярные вопросы в этой категории