Comment utiliser le validateur de changer la couleur de la bordure de formcontrolname angulaire

Question 1

J'ai un formcontrol où je veux changer la couleur lorsque le champ n'est pas valide j'ai essayé ce qui suit, comme la plupart des exemples, faire de même:

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

Mon ts formcontrol est généré comme ceci:

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

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

Mais j'obtiens l'erreur suivante:

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

toute idée de ce que je fais de mal?

Mise à JOUR: J'ai ajouté de la lecture et enlevé le point d'interrogation, mais encore les riverains ne fonctionne pas seulement message d'erreur est affiché.

UPdate2:

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

Ce que je veux

Ce que je reçois

Question 2

Essayez ceci.

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

Question 3

si simple pour l'entrée de validation en utilisant bootstrap classe : D'abord en vous fichier HTML, nous avons :

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

donc, dans votre fichier 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

}

par la présente, vous pouvez valider la saisie si simplement .

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

-1

Essayez ceci.

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

N.F.

2021-11-24 06:51:12

hey merci cela m'a apporté un peu plus loin, mais maintenant il est juste un grand rectangle autour de l'étiquette et de l'entrée. Je veux seulement changer la couleur de la bordure avez-vous une idée sur comment faire pour changer mon scss? J'ai mis à jour mon code

natyus

Désolé, je ne comprends pas ce que vous essayez de faire. S'il vous plaît montrer avec une image.

N.F.

J'ai ajouté des photos

natyus

Votre code html dans ce post n'a pas une étiquette. Veuillez mettre à jour votre post afin qu'il comprend toute la partie "Ce que je reçois".

N.F.

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

si simple pour l'entrée de validation en utilisant bootstrap classe : D'abord en vous fichier HTML, nous avons :

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

donc, dans votre fichier 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

}

par la présente, vous pouvez valider la saisie si simplement .

Comment utiliser le validateur de changer la couleur de la bordure de formcontrolname angulaire

La question

Dans d'autres langues

Cette page est dans d'autres langues

Populaires dans cette catégorie

Questions populaires dans cette catégorie