कैसे उपयोग करने के लिए सत्यापनकर्ता करने के लिए बॉर्डर का रंग बदलने के formcontrolname में कोणीय

0

सवाल

मैं एक formcontrol जहाँ मैं चाहता हूँ, रंग बदलने के लिए, जब फ़ील्ड अमान्य है मैं कोशिश की है, निम्नलिखित के रूप में सबसे अधिक उदाहरण एक ही मत करो:

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

मेरे टीएस formcontrol उत्पन्न होता है, इस तरह:

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

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

लेकिन मैं निम्नलिखित त्रुटि हो रही हूँ:

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

किसी भी विचार है मैं क्या कर रहा हूँ गलत?

अद्यतन: मैं मनुष्य और हटा दिया है, प्रश्न चिह्न है, लेकिन अभी भी सीमा से सटे काम नहीं करता है केवल त्रुटि संदेश दिखाया गया है ।

UPdate2:

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

मैं क्या चाहते हैं target image

मैं क्या मिलता है what i get

angular javascript typescript
2021-11-24 06:36:31
2
-1

इस प्रयास करें ।

[ngClass]="{'error': form.get('personNameField')?.errors}"
2021-11-24 06:51:12

अरे धन्यवाद यह मुझे लाया एक कदम आगे है, लेकिन अब वहाँ सिर्फ एक बड़ा आयत के आसपास लेबल और इनपुट. मैं केवल चाहते हैं के लिए सीमा रंग बदल क्या आप एक विचार है करने के लिए कैसे पर अपने एससीएसएस? मैं अपने कोड अद्यतन
natyus

खेद है कि मैं नहीं कर सकते हैं क्या समझने की कोशिश कर रहे हैं करने के लिए करते हैं. को दिखाने के लिए एक छवि के साथ.
N.F.

मैं चित्रों को जोड़ने
natyus

अपने html में यह पद नहीं है एक लेबल है. कृपया अपनी पोस्ट अद्यतन इतना है कि यह भी शामिल है सभी भाग "क्या मैं".
N.F.
-1

इतना आसान के लिए इनपुट सत्यापन का उपयोग कर बूटस्ट्रैप वर्ग : पहली बार में आप HTML फ़ाइल में हम है :

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

तो में अपने टीएस फ़ाइल :

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

}

इस के द्वारा, आप कर सकते हैं मान्य इनपुट तो बस .

2021-11-24 07:22:10

अन्य भाषाओं में

यह पृष्ठ अन्य भाषाओं में है

Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Česk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................

इस श्रेणी में लोकप्रिय

लोकप्रिय सवाल इस श्रेणी में