मेरे पास एक सत्यापन फॉर्म कहा जाता है और एक फॉर्म सरणी है जिसे तीन फ़ील्ड के साथ रिपडिटेल कहा जाता है। डिफ़ॉल्ट रूप से प्रपत्र तीन फ़ील्ड दिखाता है। उपयोगकर्ता अधिक विवरण जोड़ें पर क्लिक करके अधिक विवरण जोड़ सकता है। अब मैं जांचना चाहता हूं कि Mydetails[0].name mydetails[1].name से मेल नहीं खाना चाहिए। क्या कोई इसमे मेरी मदद कर सकता है

Myform = this.fb.group({   
    Mydetails: this.fb.array([this.createMydetails()])   
  });

createMydetails(): FormGroup {
    return this.fb.group({
      Myname: ['', Validators.required ],
      Myid: ['', Validators.required],
      Myphone: ['', Validators.required]
    });
  }

एचटीएमएल

<div
        formArrayName="Mydetails"
        *ngFor="let item of Mydetails.controls; let i = index"
      >
        <div [formGroupName]="i">
          <mat-form-field appearance="outline">
            <mat-label class="required">
              Name
            </mat-label>
            <input
              appAlphaNumeric
              [maxlength]="maxRepNamelen"
              formControlName="Myname"
              class="mat-body-1"
              matInput
            />
          </mat-form-field>
          <mat-form-field appearance="outline">
            <mat-label class="required">
              Id
            </mat-label>
            <input
              appAlphaNumeric
             
              formControlName="Myid"
              class="mat-body-1"
              matInput
            />
          </mat-form-field>
          <div class="phn-wrapper">
            <ngx-intl-tel-input
              [cssClass]="'int-phn'"
              [searchCountryField]="[
                SearchCountryField.Iso2,
                SearchCountryField.Name
              ]"name="phone"
              formControlName="Myphone"
            >
            </ngx-intl-tel-input>
          </div>
          <mat-icon
            *ngIf="Mydetails.length > 1"
            (click)="remove(i)"
            class="close"
            >close</mat-icon
          >
          
        </div>
      </div>
        class="add-fields"
        (click)="add()"
      >
        <mat-icon class="icon">add_circle_outline</mat-icon>
        <span class="text mat-button">
          {{"ADD MORE"}}</span
        >
      </div>
0
Prashanth 1 नवम्बर 2020, 12:01

1 उत्तर

सबसे बढ़िया उत्तर

इस SO< में /a> आपके पास फॉर्मअरे पर एक कस्टम सत्यापन है। यदि आप किसी प्रपत्र पर कस्टम सत्यापन का उपयोग करते हैं तो समस्या यह है कि हमेशा जाँच की जाती है कि आप प्रपत्र में कोई भी मान बदलते हैं (प्रतिनिधि नाम में कोई भी परिवर्तन, या पासपोर्ट में या फ़ोननाम में)

आप प्रपत्र नियंत्रण पर एक कस्टम सत्यापनकर्ता बना सकते हैं जो अन्य नियंत्रणों को ध्यान में रखता है

  checkIfUnique(index) {
    return (control: FormControl) => {
      //try get the form array
      //control.parent is the FormGroup, control.parent.parent is the formArray
      const formArray =
        control.parent && control.parent.parent
          ? (control.parent.parent as FormArray)
          : null;
      if (formArray && formArray.controls.length) {
        for (let i = index - 1; i >= 0; i--) {
          if (
            (formArray.at(i) as FormGroup).get("repName").value == control.value
          )
            return { errorRepeat: true };
        }
      }
    };
  }

आपको जरूरत है, जब फॉर्मएरे का फॉर्मग्रुप बनाते हैं, तो सत्यापनकर्ता को तत्व के "इंडेक्स" को पास करें। तो आपकी जरूरत है अपना फंक्शन बदलें createRep

//pass the index
createRep(index:number): FormGroup {
    return this.fb.group({
      repName: ['', [Validators.required,this.checkIfUnique(index) ]],
      passport: ['', Validators.required],
      phoneNumber: ['', Validators.required]
    });
  }

खैर, आखिरी हमें जरूरत है, जब किसी भी 'repName' का मान बदलते हैं, तो बाकी नियंत्रणों की जांच करें। याद रखें कि एंगुलर उस फॉर्मकंट्रोल की जांच करता है जिसे आप बदलते हैं, लेकिन बाकी को नहीं, इसलिए यदि repName[0]="a" और repName[1]="b", repName[0] को "b" में बदलते हैं तो एंगुलर चेक न करें repName[1] . तो हम एक फंक्शन बनाते हैं

  checkFormArray()
  {
    this.detailsFormArray.controls.forEach(x=>{
      (x as FormGroup).get('repName').updateValueAndValidity()
    })
  }
  //I use a getter of the formArray
  get detailsFormArray() {
     return (this.verificationForm.get("repDetails") as FormArray)
  }

और इनपुट में हम फ़ंक्शन को कॉल करते हैं

  <input formControlName="repName" (input)="checkFormArray()">

आप स्टैकब्लिट्ज देख सकते हैं

नोट: मैं आपके प्रश्न से टैग angularjs हटा देता हूं (आपका प्रश्न केवल कोणीय के बारे में है)

0
Eliseo 1 नवम्बर 2020, 14:20