Come utilizzare il validatore per modificare il colore del bordo di formcontrolname angolare

Question 1

Ho un formcontrol dove voglio cambiare il colore quando il campo non è valido, ho provato le seguenti, come la maggior parte degli esempi di fare lo stesso:

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

Il mio ts formcontrol è generato come questo:

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

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

Ma ottengo il seguente errore:

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

qualsiasi idea di cosa sto facendo di sbagliato?

AGGIORNAMENTO: Ho aggiunto il getter e tolto il punto di domanda, ma comunque il confinante non funziona solo il messaggio di errore viene visualizzato.

UPdate2:

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

Quello che voglio

Ciò che ho

Question 2

Prova in questo modo.

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

Question 3

in modo semplice, per la convalida dell'input utilizzando bootstrap classe : Primo è un file HTML che abbiamo :

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

quindi nel tuo file 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

}

da questo, si può convalidare l'input in modo così semplice .

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

-1

Prova in questo modo.

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

N.F.

2021-11-24 06:51:12

ehi, grazie, questo mi ha portato un ulteriore passo in avanti, ma ora c'è solo un grande rettangolo intorno all'etichetta e di input. Voglio solo cambiare il colore del bordo che avete un idea su come modificare il mio scss? Ho aggiornato il mio codice

natyus

Scusa non riesco a capire cosa stai cercando di fare. Si prega di mostrare con un'immagine.

N.F.

Ho fatto aggiungere immagini

natyus

Il codice html in questo post non ha un'etichetta. Si prega di aggiornare il tuo post in modo che esso comprende tutta la parte "Quello che ho".

N.F.

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

in modo semplice, per la convalida dell'input utilizzando bootstrap classe : Primo è un file HTML che abbiamo :

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

quindi nel tuo file 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

}

da questo, si può convalidare l'input in modo così semplice .

Come utilizzare il validatore per modificare il colore del bordo di formcontrolname angolare

Domanda

In altre lingue

Questa pagina è in altre lingue

Popolare in questa categoria

Domande popolari in questa categoria