जब कोई फॉर्म संपादन मोड में होता है तो मुझे एपीआई से मानों के साथ चेकबॉक्स को भरने का एक उचित उदाहरण नहीं मिल रहा है।

मेरे पास एक ऐसी सेवा है जो एपीआई से भूमिका डेटा प्राप्त करती है। प्रत्येक भूमिका में कई अनुमतियां हो सकती हैं जैसे संपादन-उपयोगकर्ता, निर्माण-उपयोगकर्ता, उत्पाद-उत्पाद, संपादन-उत्पाद, आदि। मुझे एक ऐसा फॉर्म चाहिए जहां उपयोगकर्ता चेकबॉक्स का उपयोग करके इन भूमिका अनुमतियों को संपादित कर सके। मैंने नीचे दिखाए गए पैचवैल्यू का उपयोग करने का प्रयास किया है लेकिन यह अब तक किसी भी चीज़ का जवाब नहीं देता है।

  rolePermissionList = [];
  permissionList = [];

  setupForm() {

    this.roleForm = this.fb.group({
      role_name: ["", Validators.required],
      description: [""],
      status: [""],
      permissions: this.fb.array([]),
    }, {updateOn: 'change'});

  }


  ngOnInit() {

    this.setupForm();

    this.route.paramMap.subscribe(params => {

      this.id = parseInt(params.get("id"));

      // fetch single role record
      this.getPageData(this.id);

    })

  }

  // get page data
  async getPageData(role_id) {

    this.spinner.show();

    // get role
    await this.getRole(role_id);

    // get all permissions
    await this.getPermissions();

    // get role permissions
    await this.getRolePermissions(role_id);

    this.spinner.hide();

  }

मेरे पास दो सेवाएं हैं: एक जो संपूर्ण अनुमति सूची लौटाती है, और दूसरी जो वर्तमान भूमिका को असाइन की गई अनुमतियां लौटाती है। मैं संपादित की जा रही वर्तमान भूमिका को सौंपी गई अनुमतियों की जांच करने का एक तरीका चाहता हूं। ये वे कार्य हैं जो सभी अनुमतियाँ और भूमिका अनुमतियाँ प्राप्त करते हैं:

// get permissions list

getPermissions() {

    this.permissionService.getPermissionsList()

      .subscribe(

        data => {

          console.log("permissions === ", data);

          this.permissionList = data;

        },

        error => console.log(error));

  }



  // get role permissions
  getRolePermissions(role_id?:any) {

    // if role_id is supplied
    let params = new HttpParams();
    if (role_id) {
      params=params.set('role_id', role_id.toString());
    }

    this.rolePermissionService.getRolePermissionsList(params)
      .subscribe(
        data => {

          // store fetched data
          this.rolePermissionList = data;

          // extract permission name from returned array
          var arrayOfPerms = data.map(function(obj) {
            return obj.name;
          });

          // patch data
          this.roleForm.pastchValue('permissions', arrayOfPerms);

        },
        error => {

          console.log(error);

        });

  }

सामने का छोर:

...

<div class="row" *ngIf="permissionList; else loading">

   <div *ngFor="let permission of permissionList; let i=index" class="col-md-6">

      <div class="custom-control custom-checkbox mr-sm-2 m-b-15">
         <input type="checkbox"
          [value]="permission.id"
          (change)="onCheckChange($event)"
          class="custom-control-input"
          id="checkbox-{{ i }}">

       <label class="custom-control-label" for="checkbox-{{ i }}">{{  permission.display_name }}</label>
      </div>

   </div>

</div>

...

किसी भी प्रकार की सहायता सराहनीय होगी?

1
nixxx 1 नवम्बर 2019, 11:17
क्या आपको काम करने के लिए एक नमूना स्टैकब्लिट्ज बनाने का मन है? आप json फ़ाइल से assets फ़ोल्डर में HttpClient के माध्यम से डेटा प्राप्त कर सकते हैं। कॉल में HttpClient की get विधि के लिए बस /assets/data.json का url प्रदान करें। कृपया नमूना स्टैकब्लिट्ज का लिंक साझा करें। या आप इसे फोर्क कर सकते हैं stackblitz जिसे मैंने अभी इसके लिए बनाया है उत्तर
 – 
SiddAjmera
1 नवम्बर 2019, 11:37

2 जवाब

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

मैं सेटअप को थोड़ा बदल दूंगा, और permissionList के बजाय टेम्पलेट में एक फॉर्मरेरे को पुन: सक्रिय करूंगा। इसके अलावा मैं आईडी वापस कर दूंगा:

var arrayOfPerms = data.map(function(obj) {
  return obj.id;
});

चूँकि आपका permissionList, id को मान के रूप में उपयोग कर रहा है।

तो संपादन से पहले फ़ॉर्म कैसा दिखेगा। यहां मैंने http-अनुरोध को छोड़ दिया है और मानों को हार्ड कोड किया है:

permissionList = [
  { id: 1, displayName: 'Admin' },
  { id: 2, displayName: 'User' },
  { id: 3, displayName: 'SuperUser' }
];

rolePermissionList = [1, 3];

constructor(private fb: FormBuilder) {

  // set all checkboxes as false initially
  const ctrls = this.permissionList.map(control => this.fb.control(false));

  this.roleForm = this.fb.group({
    permissions: this.fb.array(ctrls),
  });
}

// for being able to shorten
get permissionsArr() {
  return this.roleForm.get('permissions') as FormArray;
}

submit() {
  // filter the checked and store in array
  const selectedRoles= this.roleForm.value.permissions
    .map((checked, i) => checked ? this.permissionList[i].id : null)
    .filter(value => value !== null);
  // here is an array of ids, e.g [1, 3]
  console.log(selectedRoles)
}

और प्रासंगिक टेम्पलेट भाग:

<label formArrayName="permissions" *ngFor="let perm of permissionsArr.controls; index as i">
  <input type="checkbox" [formControlName]="i">
  {{permissionList[i].displayName}}
</label>

तो जब यह किया जाता है, और आप मूल्यों को पैच करना चाहते हैं, तो बस एक फ़ंक्शन को कॉल करें जो जांचता है कि कौन सी आईडी permissionList में मेल खाती है, और फॉर्म नियंत्रण पर patchValue() का उपयोग करें:

patchValue() {
  this.permissionList.map((perm, i) => {
    if (this.rolePermissionList.indexOf(perm.id) !== -1) {
      this.permissionsArr.at(i).patchValue(true)
    }
  })
}

यहां एक STACKBLITZ डेमो है ।

2
AJT82 2 नवम्बर 2019, 13:43
धन्यवाद इसने मेरे लिए कुछ मामूली बदलावों के साथ काम किया। चीयर्स।
 – 
nixxx
5 नवम्बर 2019, 10:22
बढ़िया, बढ़िया, खुशी है कि मैं रास्ते में आपकी मदद कर सका! :)
 – 
AJT82
5 नवम्बर 2019, 11:17

फ़ॉर्म सरणी को पैच करना या रीसेट करना बहुत कष्टप्रद है, आप इसे लेख.

आपको अपनी सरणी को आवश्यक लंबाई के साथ अपडेट करने की आवश्यकता है।

  • जब आप vaue को पैच करना चाहते हैं तो आपके पास कम या ज्यादा आइटम होने पर आप अपने सरणी में formControl जोड़ या हटा सकते हैं।
0
Wandrille 1 नवम्बर 2019, 11:44
क्या कोणीय में चेकबॉक्स की एक सरणी को पैच करना संभव है? मुझे पता है कि इस प्रश्न का एक सरल उत्तर होना चाहिए, मैं इसे समझ नहीं पा रहा हूं ...
 – 
nixxx
1 नवम्बर 2019, 14:48
हाँ आप कर सकते हैं। लेकिन आपकी सरणी की लंबाई सही होनी चाहिए।
 – 
Wandrille
1 नवम्बर 2019, 15:09