Jak korzystać z validator aby zmienić kolor obramowania, formcontrolname w angular

Question 1

Mam formant formularza, w którym chcę zmienić kolor, gdy pole jest niedopuszczalne, próbowałem następujący, tak jak większość przykładów robią to samo:

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

Mój ts formcontrol generowane w następujący sposób:

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

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

Ale otrzymuję następujący błąd:

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

jakieś pomysły co robię nie tak?

Odśwież: Dodałem, że getter i usunął znak zapytania, ale granica nie działa, wyświetla się tylko komunikat o błędzie.

Aktualizacja 2:

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

Czego chcę

Co mam

Question 2

Spróbuj to.

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

Question 3

tak tylko dla sprawdzenia wprowadzania danych za pomocą klasy startowej : Najpierw w swoim pliku HTML mamy :

        <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 więc, w swoim pliku 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

}

w ten sposób można tak po prostu sprawdzić wprowadzone dane .

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

-1

Spróbuj to.

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

N.F.

2021-11-24 06:51:12

hej, dzięki, to zrobiłam jeden krok do przodu, ale teraz wokół etykiety i wprowadzania jest tylko jeden duży prostokąt. Chcę tylko zmienić kolor obramowania masz pomysł o tym, jak zmienić mój scss? Zaktualizowałem swój kod

natyus

Przepraszam, nie mogę zrozumieć, co próbujesz zrobić. Proszę pokazać z obrazem.

N.F.

Naprawdę dodał zdjęć

natyus

Twój kod html w tym poście nie ma etykiety. Proszę zaktualizować swój post, aby obejmował całą część "Co mam".

N.F.

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

tak tylko dla sprawdzenia wprowadzania danych za pomocą klasy startowej : Najpierw w swoim pliku HTML mamy :

        <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 więc, w swoim pliku 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

}

w ten sposób można tak po prostu sprawdzić wprowadzone dane .

Jak korzystać z validator aby zmienić kolor obramowania, formcontrolname w angular

Pytanie

W innych językach

Ta strona jest w innych językach

Popularne w tej kategorii

Najczęściej zadawane pytania w tej kategorii