Jak používat validátor změnit barvu ohraničení formcontrolname v úhlové

Question 1

Mám formcontrol, kde chci změnit barvu, když pole je neplatná snažil jsem se následující jako většina příkladů udělat to samé:

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

Moje ts formcontrol je generována takto:

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

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

Ale já jsem dostat následující chybu:

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

nějaký nápad, co dělám špatně?

AKTUALIZACE: Přidal jsem kariérista a odstraněn otazník ale stále hraničící nefunguje pouze chybové hlášení je zobrazeno.

UPdate2:

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

To, co chci

To, co jsem si

Question 2

Zkuste tento.

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

Question 3

tak jednoduché pro vstupní validaci pomocí bootstrap třídy : První v ty HTML souboru 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 ve vašem ts souboru :

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ím, si můžete ověřit vstup tak jednoduše .

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

-1

Zkuste tento.

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

N.F.

2021-11-24 06:51:12

hej díky to mě přivedl jeden krok dále, ale teď tam je jen jeden velký obdélník kolem label a input. Chci jen změnit barvu ohraničení, máte už představu o tom, jak změnit můj scss? Aktualizoval jsem můj kód

natyus

Promiň, že jsem nemůže pochopit, co se snažíte udělat. Prosím, ukaž s obrazem.

N.F.

Udělal jsem přidat obrázky

natyus

Html v tomto příspěvku nemá štítek. Prosím, aktualizujte svůj příspěvek tak, že zahrnuje všechny části ", Co jsem si".

N.F.

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

tak jednoduché pro vstupní validaci pomocí bootstrap třídy : První v ty HTML souboru 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 ve vašem ts souboru :

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ím, si můžete ověřit vstup tak jednoduše .

Jak používat validátor změnit barvu ohraničení formcontrolname v úhlové

Otázka

V jiných jazycích

Tato stránka je v jiných jazycích

Populární v této kategorii

Oblíbené položky v této kategorii