Cum să utilizați validator pentru a schimba culoarea de frontieră de formcontrolname în unghiulare

Question 1

Am o formcontrol unde vreau pentru a schimba culoarea atunci când câmpul este invalid am încercat următoarele ca cele mai multe exemple facă același lucru:

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

Mi ts formcontrol este generat astfel:

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

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

Dar primesc urmatoarea eroare:

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

orice idee ce fac gresit?

UPDATE: Am adăugat getter și eliminat semn de întrebare, dar încă se invecineaza nu funcționează doar mesajul de eroare este afișat.

UPdate2:

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

Ceea ce vreau

Ceea ce primesc

Question 2

Încercați acest lucru.

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

Question 3

atât de simplu pentru validare de intrare folosind bootstrap clasa : În primul rând în tine fișier HTML avem :

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

deci, în fișier 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

}

prin aceasta, puteți valida de intrare astfel încât, pur și simplu .

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

-1

Încercați acest lucru.

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

N.F.

2021-11-24 06:51:12

hei multumesc ca mi-a adus un pas mai departe, dar acum nu este doar un mare dreptunghi în jurul valorii de etichetă și de intrare. Vreau doar pentru a schimba culoarea de frontieră ai o idee despre cum să-mi schimb scss? Am actualizat codul meu

natyus

Îmi pare rău nu pot să înțeleg de ce încerci să faci. Vă rugăm să arată cu o imagine.

N.F.

Am făcut-adauga poze

natyus

Html in acest mesaj nu are o etichetă. Vă rugăm să actualizați post, astfel încât acesta include toate parte "ceea Ce primesc".

N.F.

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

atât de simplu pentru validare de intrare folosind bootstrap clasa : În primul rând în tine fișier HTML avem :

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

deci, în fișier 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

}

prin aceasta, puteți valida de intrare astfel încât, pur și simplu .

Cum să utilizați validator pentru a schimba culoarea de frontieră de formcontrolname în unghiulare

Problema

În alte limbi

Această pagină este în alte limbi

Popular în această categorie

Întrebări frecvente în această categorie