Açısal formcontrolname kenarlık rengini değiştirmek için doğrulayıcı nasıl kullanılır

Question 1

Alan geçersiz olduğunda rengi değiştirmek istediğim bir formcontrol'üm var, çoğu örnek aynı şeyi yaptığından aşağıdakileri denedim:

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

Ts formcontrol'üm şu şekilde oluşturulur:

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

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

Ama şu hatayı alıyorum:

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

neyi yanlış yaptığımı biliyor musun?

Güncelleme: Alıcıyı ekledim ve soru işaretini kaldırdım ama yine de sınır çalışmıyor sadece hata mesajı gösteriliyor.

güncelleme2:

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

Ne istiyorum

Ne alacağım

Question 2

Bu deneyin.

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

Question 3

bootstrap sınıfını kullanarak giriş doğrulaması için çok basit : İlk önce HTML dosyanız var :

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

yani ts dosyanızda :

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

}

bu sayede girişi çok basit bir şekilde doğrulayabilirsiniz .

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

-1

Bu deneyin.

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

N.F.

2021-11-24 06:51:12

hey teşekkürler bu beni bir adım daha ileri götürdü ama şimdi etiketin ve girdinin etrafında sadece büyük bir dikdörtgen var. Sadece kenarlık rengini değiştirmek istiyorum scss'mi nasıl değiştireceğime dair bir fikrin var mı? Kodumu güncelledim

natyus

Üzgünüm, mümkün değil anlamak ne çalıştığınız için. Bir resim ile gösterin lütfen.

N.F.

Ben yaptım Resim Ekle

natyus

Bu gönderideki html'nizin etiketi yok. Lütfen gönderinizi "Ne alıyorum"bölümünün tamamını içerecek şekilde güncelleyin.

N.F.

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

bootstrap sınıfını kullanarak giriş doğrulaması için çok basit : İlk önce HTML dosyanız var :

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

yani ts dosyanızda :

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

}

bu sayede girişi çok basit bir şekilde doğrulayabilirsiniz .

Açısal formcontrolname kenarlık rengini değiştirmek için doğrulayıcı nasıl kullanılır

Soru

Diğer dillerde

Bu sayfa diğer dillerde

Bu kategoride popüler

Popüler soruları bu kategoride