Cómo utilizar el validador para cambiar el color del borde de formcontrolname en angular

Question 1

Tengo un formcontrol donde quiero cambiar el color cuando el campo no es válido he intentado lo siguiente como la mayoría de los ejemplos de la misma:

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

Mi ts formcontrol se genera como este:

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

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

Pero estoy recibiendo el siguiente error:

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

alguna idea de lo que estoy haciendo mal?

ACTUALIZACIÓN: He añadido la función de captador y quita el signo de interrogación, pero aún limítrofes no funciona solo mensaje de error se muestra.

UPdate2:

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

Lo que quiero

Lo que me pasa

Question 2

Intenta esto.

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

Question 3

tan sencillo para la validación de entrada usando bootstrap clase : La primera en la que el archivo HTML tenemos :

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

así que en su archivo 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

}

por la presente, usted puede validar la entrada, así que simplemente .

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

-1

Intenta esto.

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

N.F.

2021-11-24 06:51:12

hey muchas gracias esto me trajo un paso más, pero ahora no es un gran rectángulo alrededor de la etiqueta y de entrada. Solo quiero cambiar el color del borde, ¿tienes una idea sobre cómo cambiar mi secs? He actualizado mi código

natyus

Lo siento, no se puede entender lo que usted está tratando de hacer. Por favor, mostrar con una imagen.

N.F.

Hice añadir fotos

natyus

Html en este post no tiene etiqueta. Por favor actualizar el post para que se incluye toda la parte "Lo puedo conseguir".

N.F.

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

tan sencillo para la validación de entrada usando bootstrap clase : La primera en la que el archivo HTML tenemos :

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

así que en su archivo 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

}

por la presente, usted puede validar la entrada, así que simplemente .

Cómo utilizar el validador para cambiar el color del borde de formcontrolname en angular

Pregunta

En otros idiomas

Esta página está en otros idiomas

Popular en esta categoría

Las preguntas más habituales en esta categoría