เชิงมุม 2: ทำซ้ำบนตัวควบคุมฟอร์มปฏิกิริยา


คำตอบ:


199

พบว่าObject.keysรับมือได้ ..

    Object.keys(this.form.controls).forEach(key => {
      this.form.get(key).markAsDirty();
    });

สำหรับ Angular 8+ ให้ใช้สิ่งต่อไปนี้ (ตามคำตอบของ Michelangelo):

    Object.keys(this.form.controls).forEach(key => {
      this.form.controls[key].markAsDirty();
    });

2
เมื่อฉันใช้ฟังก์ชันนี้ใน onSubmit ฉันได้รับข้อผิดพลาดCannot invoke an expression whose type lacks a call signature. Type 'AbstractControl' has no compatible call signatures.ไม่มีใครรู้สาเหตุ
maidi

1
Object.keys (this.registerForm.controls) .forEach (คีย์ => {this.registerForm.controls [คีย์] .markAsDirty ();});
Foad

เมื่อฉันลอง Object.keys หรือแม้แต่ "for in" ฉันก็ไม่ได้อะไรเลย แต่ถ้าฉัน console.log (form.controls) ฉันสามารถดูตัวควบคุมฟอร์มต่างๆทั้งหมดที่มีอยู่ในออบเจ็กต์ได้ ฉันงุนงง
Jake Shakesworth

การใช้ Angular 5 markAsDirty () / markAsTouched () จะไม่ถูกนำกลับมาใช้ใหม่ใน FormGroups ย่อยใด ๆ ฉันแตกรหัสด้านบนออกเป็นฟังก์ชันเรียกซ้ำและเรียกใช้ในกลุ่มย่อย FormGroups ทำงานได้ดีขึ้นกับโครงการ Angular Material UI ในปัจจุบันในกรณีที่ผู้ใช้ไม่เคยสัมผัสองค์ประกอบที่ต้องการฉันเรียกมันว่าเมื่อผู้ใช้พยายามส่งแบบฟอร์มเพื่อทำเครื่องหมายใด ๆ ณ จุดนั้น
Robert

3
ขอบคุณสำหรับการอ่านโพสต์ของฉันและอัปเดตคำตอบของคุณเอง เอกสารอย่างเป็นทางการก็ล้าสมัยด้วยดังนั้นฉันจึงต้องหาสิ่งนี้โดยพิมพ์ทุกบรรทัด ...
Michelangelo

56

เพื่อสิ่งที่คุ้มค่ามีอีกวิธีหนึ่งที่ทำได้โดยไม่ต้องใช้เวทย์มนตร์ Object.keys (... ) :

for (const field in this.form.controls) { // 'field' is a string

  const control = this.form.get(field); // 'control' is a FormControl  

}

จะรับดัชนีของวงได้อย่างไร
SVK

1
สำหรับผู้ที่ใช้ TSLint โค้ดจะใช้งานได้ แต่ TSLint บ่นด้วยคำสั่ง "for (... in ... ) ต้องถูกกรองด้วยคำสั่ง if (forin)"
Yennefer

1
tslint กำลังชี้ให้เห็นคำพูดจากเอกสาร JavaScript ของคำสั่งfor
Egle Kreivyte

41

คำตอบที่ยอมรับนั้นถูกต้องสำหรับโครงสร้างแบบฟอร์มเรียบ แต่ไม่ได้ตอบคำถามเดิมอย่างสมบูรณ์ หน้าเว็บอาจต้องใช้ FormGroups และ FormArrays ที่ซ้อนกันและเราต้องคำนึงถึงสิ่งนี้เพื่อสร้างโซลูชันที่มีประสิทธิภาพ

public markControlsDirty(group: FormGroup | FormArray): void {
    Object.keys(group.controls).forEach((key: string) => {
        const abstractControl = group.controls[key];

        if (abstractControl instanceof FormGroup || abstractControl instanceof FormArray) {
            this.markControlsDirty(abstractControl);
        } else {
            abstractControl.markAsDirty();
        }
    });
}

จะใช้instanceofงานได้เสมอหลังจากถูกถ่ายทอดโดย typescript?
เด่น

@ the- instanceofOutstanding ไม่ใช่คีย์เวิร์ดเฉพาะ TypeScript ( developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… ) ไม่ใช่classประเภทข้อมูล
Keenan Diggs

8

การใช้คำตอบ @Marcos ฉันสร้างฟังก์ชันที่สามารถเรียกได้ว่าส่ง formGroup เป็นพารามิเตอร์และทำเครื่องหมายว่าเด็ก ๆ ของ formGroup ทุกคนควบคุมว่าสกปรกเพียงเพื่อให้สามารถใช้งานได้จากที่อื่น ๆ รอบ ๆ โค้ดที่ใส่ไว้ในบริการตัวอย่างเช่น

public touchAllFormFields(formGroup: FormGroup): void {
    Object.keys(formGroup.controls).forEach((key) => {
        formGroup.get(key).markAsDirty();
    });
}

หวังว่ามันจะช่วยได้;)


สมบูรณ์แบบ! เพิ่มไปยังบริการพร้อมด้วยฟังก์ชันที่คล้ายกับ clearValidators, ยกเลิกการสัมผัส ฯลฯ อาจต้องการเพิ่มการตรวจสอบซ้ำสำหรับการควบคุมที่ซ้อนกัน แต่วิธีนี้ใช้ได้ในตอนนี้ ขอบคุณ!
01

6

ดูเหมือนว่าget ฟังก์ชันจะไม่ทำงานอีกต่อไปสำหรับการดึงค่าเฉพาะในรูปแบบของคุณใน Angular 8 ดังนั้นนี่คือวิธีที่ฉันแก้ไขตามคำตอบของ @Liviu Ilea

for (const field in this.myForm.controls) { // 'field' is a string
  console.log(this.myForm.controls[field].value);
}

คุณแน่ใจไหม? API doc มีเมธอด get อยู่แล้วสำหรับ Abstract Control ( angular.io/api/forms/AbstractControl#get ) ฉันยังไม่ได้ย้ายข้อมูล ตอนนี้ฉันกลัว (⊙_◎)
Alan Grosz

@AlanGrosz ใช่ฉันก็เห็นเช่นกันเมื่อฉันเขียนใหม่ แต่ถึงแม้จะพิมพ์ทุกบรรทัดในคอนโซลฉันก็ไม่พบวิธีรับใด ๆ บนวัตถุ ฉันคิดว่าเอกสารอยู่เบื้องหลัง ขอให้โชคดีในการโยกย้าย!
Michelangelo

ฉันไม่คิดว่าพวกเขาลบมันออกไปทำงานให้ฉันใน Angular 8 นอกจากนี้มันยังอยู่ในเอกสารangular.io/api/forms/AbstractControl#get
Laszlo Sarvold


4

นี่คือสิ่งที่ใช้ได้ผลสำหรับฉัน

private markFormGroupTouched(formGroup: FormGroup) {
  Object.keys(formGroup.controls).forEach((key) => {
    const control = formGroup.controls[key];
    control.markAsDirty();
    if ((control instanceof FormGroup)) {
      this.markFormGroupTouched(control);
    }
  });
}

1

ฉันสร้างฟังก์ชั่นนี้ขึ้นมา * ฉันมีการควบคุมที่มีชื่อ 'order' และส่งดัชนีให้เขา

{"conditionGroups": [
   {
     "order": null,
     "conditions": []
   }
  ]
}


updateFormData() {
    const control = <FormArray>this.form.controls['conditionGroups'];  
    control.value.map((x,index)=>{
    x.order = index; 
 })
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.