Como usar o validador para alterar a cor da borda de formcontrolname angular

Question 1

Eu tenho um formcontrol onde eu quero mudar a cor quando o campo é inválida eu tentei o seguinte, como a maioria dos exemplos a fazer o mesmo:

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

Meu ts formcontrol é gerado como este:

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

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

Mas estou recebendo o seguinte erro:

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

alguma idéia do que eu estou fazendo de errado?

ATUALIZAÇÃO: Eu adicionei o getter e removido o ponto de interrogação, mas ainda a fronteira não funciona apenas a mensagem de erro é mostrada.

UPdate2:

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

O que eu quero

O que eu recebo

Question 2

Tente isso.

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

Question 3

de modo simples para a validação de entrada usando o bootstrap classe : Primeiro você arquivo HTML, temos :

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

assim, em seu ts arquivo :

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

}

por isso, você pode validar a entrada tão simplesmente .

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

-1

Tente isso.

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

N.F.

2021-11-24 06:51:12

ei, obrigado isso me trouxe um passo a mais, mas agora há apenas um grande retângulo em torno do rótulo e entrada. Eu só deseja alterar a cor da borda que você tem uma idéia sobre como alterar meu escs? Eu atualizei o meu código

natyus

Desculpe, eu não consigo entender o que você está tentando fazer. Por favor, mostrar com uma imagem.

N.F.

Eu fiz adicionar imagens

natyus

O html nesta mensagem não tem um rótulo. Por favor, atualize o seu post para que ele inclui toda a parte "o Que eu recebo".

N.F.

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

de modo simples para a validação de entrada usando o bootstrap classe : Primeiro você arquivo HTML, temos :

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

assim, em seu ts arquivo :

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

}

por isso, você pode validar a entrada tão simplesmente .

Como usar o validador para alterar a cor da borda de formcontrolname angular

Pergunta

Em outros idiomas

Esta página está em outros idiomas

Popular nesta categoria

Perguntas populares nesta categoria