Ako používať validator ak chcete zmeniť farbu orámovania z formcontrolname v uhlovej

Question 1

Mám formcontrol, kde som chcete zmeniť farbu, keď pole je neplatný snažil som sa takto, ako väčšina príkladov, to isté:

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

Môj ts formcontrol je generovaný ako je tento:

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

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

Ale som dostať nasledujúce chybové hlásenie:

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

nejakú predstavu, čo robím zle?

AKTUALIZÁCIA: Pridala som getter a odstránili otáznik, ale stále prihraničných nefunguje, len je zobrazené chybové hlásenie.

UPdate2:

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

To, čo chcem

Čo som si

Question 2

Skúste to.

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

Question 3

tak jednoduché pre vstup overenie pomocou bootstrap triedy : Prvý vo vás HTML súbor máme :

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

takže vo vašom ts súbor :

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

}

týmto si môžete overiť vstup, takže jednoducho .

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

-1

Skúste to.

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

N.F.

2021-11-24 06:51:12

ahoj vďaka tejto priniesol mi jeden krok ďalej, ale teraz je tu len jeden veľký obdĺžnik okolo štítku a vstup. Chcem iba, ak chcete zmeniť farbu orámovania máte predstavu o tom, ako zmeniť svoj scss? Som aktualizoval svoju kód

natyus

Je nám ľúto, nemôžem pochopiť, čo sa snažíte urobiť. Prosím, ukázať obrázok.

N.F.

Urobil pridať obrázky

natyus

Vaše html, že tento príspevok nemá štítok. Prosím, aktualizujte svoj príspevok tak, že zahŕňa všetky časť "Čo mám".

N.F.

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

tak jednoduché pre vstup overenie pomocou bootstrap triedy : Prvý vo vás HTML súbor máme :

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

takže vo vašom ts súbor :

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

}

týmto si môžete overiť vstup, takže jednoducho .

Ako používať validator ak chcete zmeniť farbu orámovania z formcontrolname v uhlovej

Otázka

V iných jazykoch

Táto stránka je v iných jazykoch

Populárne v tejto kategórii

Obľúbené otázky v tejto kategórii