วิธีใช้ตัวตรวจความถูกต้องที่จะเปลี่ยนสีของเส้นขอบของ formcontrolname ในสี่เหลี่ยม

Question 1

ฉันมี formcontrol อยู่ไหนฉันอยากจะเปลี่ยนสีเมื่อตอนที่ช่องข้อมูลไม่ถูกต้องฉันพยายามต่อไปนี้เป็นส่วนตัวอย่างทำแบบเดียวกัน:

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

ฉัน ts formcontrol คือถูกสร้างขึ้นอย่างนี้:

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

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

แต่ฉันได้ติดตามข้อผิดพลาดคือ:

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

รู้มั้ยว่าฉันทำอะไรผิดเหรอ?

ปรับปรุง: ฉันเพิ่ม getter และเอาคำถามแต่ยังสร้างขอบเขตไม่ได้ทำงานเพียงเกิดข้อผิดพลาดข้อความแสดง.

UPdate2:

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

สิ่งที่ฉันต้องการ

อะไรฉันเข้าใจ

Question 2

ลองนี่

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

Question 3

ดังนั้นง่ายสำหรับนำเข้าข้อมูลการตรวจสอบการใช้ bootstrap นักเรียน: ก่อนคุณยังแฟ้ม 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>

ดังนั้นในของคุณ 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

}

โดยเรื่องนี้คุณสามารถพิสูจน์ความถูกต้องของนำเข้าข้อมูลดังนั้นง่ายมาก

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

-1

ลองนี่

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

N.F.

2021-11-24 06:51:12

เฮ้ขอบคุณนี่พาฉันมาหนึ่งก้าวต่อไปแต่ตอนนี้มีแค่หนึ่งใหญ่สี่เหลี่ยมรอบๆป้ายและนำข้อมูลเข้าได้ ฉันแค่อยากจะเปลี่ยนสีของเส้นขอบคุณมีความคิดอยู่วิธีการเปลี่ยนแปลงของฉัน scss? ฉันปรับปรุงของฉันรหัส

natyus

ขอโทษฉันไม่สามารถเข้าใจสิ่งที่คุณกำลังพยายามจะทำ ได้โปรดแสดงกับภาพ

N.F.

ฉันทำการเพิ่มรูปภาพ

natyus

ของ html ในโพสไม่มีป้ายอยู่ ได้โปรดปรับปรุงของคุณโพสต์ดังนั้นมันเกี่ยวทั้งหมดเป็นส่วนที่ผมไป".

N.F.

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

ดังนั้นง่ายสำหรับนำเข้าข้อมูลการตรวจสอบการใช้ bootstrap นักเรียน: ก่อนคุณยังแฟ้ม 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>

ดังนั้นในของคุณ 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

}

โดยเรื่องนี้คุณสามารถพิสูจน์ความถูกต้องของนำเข้าข้อมูลดังนั้นง่ายมาก

วิธีใช้ตัวตรวจความถูกต้องที่จะเปลี่ยนสีของเส้นขอบของ formcontrolname ในสี่เหลี่ยม

คำถาม

ในภาษาอื่นๆ

หน้านี้อยู่ในภาษาอื่นๆ

ดังอยู่ในนี้หมวดหมู่

ดังคำถามอยู่ในนี้หมวดหมู่