Angular 4 dynamic reactive form on Drop down form API [add and remove] -


i'm facing issue in angular 4 projects grateful if find time resolve issue.

objective

on change of dropdown value need call api on basis of returned value need populate form data. [api follow same object structure]

  1. the loop have mentioned in block not running empty form controls array.

  2. i have gone through formgroup , formarray classes there no method remove controls.

  3. may approach not correct, due incomplete knowledge of angular4.

  4. fragments of source code :

    availabletoolsfornewevnlist: array<toolsfornewevn>;     selectedtoolsfornewevnlist: array<toolsfornewevn>;      getprojects() { //working fine         this.devopstoolservice.getprojects()             .subscribe(             projectlist => {                 this.projectlist = projectlist project[];                 this.projectlist.slice(0, 1).map(p => {                     this.selectedproject = p;                     this.onchange(p);                 });             },             error => this.errormessage = <any>error);     }       getdevopalltoolspojo(projectid: number) { //error block         this.devopstoolservice.getdevopalltoolspojo(projectid)             .subscribe(             projectalltoollist => {                 this.projectalltoollist = projectalltoollist devoptoolspojo[];                 let control = <formarray>this.myform.controls['devoptoolspojo'];//error in block:start                 console.log("before" + control.length);                 console.log(control);                 (let = 0; < control.length; i++) {                     console.log("loop [ " + control.length + " ]");                     console.log(control);                     control.removeat(i)                 }                 console.log("after" + control.length);                 console.log(control);//error in block:end                 projectalltoollist.foreach(p => {                     const addrctrl = this.initdevoptoolspojo(p);                     control.push(addrctrl);                 });                 this.myform.patchvalue(projectalltoollist); //working fine             },             error => this.errormessage = <any>error);         this.myform.controls['projectid'].setvalue(projectid);//working fine     }      getdevoptoolspojo(projectid: number) { //working fine         this.devopstoolservice.getdevoptoolspojo(projectid)             .subscribe(             projecttoollist => {                 this.projecttoollist = projecttoollist devoptoolspojo[];             },             error => this.errormessage = <any>error);     }      getnewdevoptoolspojo(projectid: number) { //working fine         this.devopstoolservice.getnewdevoptoolspojo(projectid)             .subscribe(             tl => {                 this.availabletoolsfornewevnlist = tl toolsfornewevn[];             },             error => this.errormessage = <any>error);     }      onchange(selectedproject) { //working fine         this.selectedproject = selectedproject;         this.getdevoptoolspojo(selectedproject.projectid);         this.getdevopalltoolspojo(selectedproject.projectid);         this.getnewdevoptoolspojo(selectedproject.projectid);     }      initdevoptoolspojo(p) { //working fine         return this._fb.group({             'devoptoolid': [p.devoptoolid],             'url': [p.url],             'username': [p.username],             'password': [p.password],             'accesskey': [p.accesskey],             'securekey': [p.securekey],             'toolname': [p.toolname],             'toolid': [p.toolid],             'tooldesc': [p.tooldesc],             'configured': [p.configured],         });     }      ngoninit() {         this.myform = this._fb.group({             'projectid': [''],             'devoptoolspojo': this._fb.array([])         });         this.initdevoptoolspojo(new devoptoolspojo());         this.selectedproject = new project();         this.getprojects();     }      constructor(         private devopstoolservice: devopstoolservice,         private _fb: formbuilder     ) {         this.availabletoolsfornewevnlist = new array<toolsfornewevn>();         this.selectedtoolsfornewevnlist = new array<toolsfornewevn>();     }

console logs:

**12:42:03.564 devops-tool.component.ts:70 ##before7  12:42:03.565 devops-tool.component.ts:71 formarray {validator: null, asyncvalidator: null, _pristine: true, _touched: false, _oncollectionchange: function…}  12:42:03.569 devops-tool.component.ts:73 ##loop [ 7 ]  12:42:03.571 devops-tool.component.ts:74 formarray {validator: null, asyncvalidator: null, _pristine: true, _touched: false, _oncollectionchange: function…}  12:42:03.572 devops-tool.component.ts:73 ##loop [ 6 ]  12:42:03.573 devops-tool.component.ts:74 formarray {validator: null, asyncvalidator: null, _pristine: true, _touched: false, _oncollectionchange: function…}  12:42:03.574 devops-tool.component.ts:73 ##loop [ 5 ]  12:42:03.575 devops-tool.component.ts:74 formarray {validator: null, asyncvalidator: null, _pristine: true, _touched: false, _oncollectionchange: function…}  12:42:03.576 devops-tool.component.ts:73 ##loop [ 4 ]  12:42:03.577 devops-tool.component.ts:74 formarray {validator: null, asyncvalidator: null, _pristine: true, _touched: false, _oncollectionchange: function…}  12:42:03.578 devops-tool.component.ts:77 ##after3**   ***//there 3 more records remove form list.*  12:42:03.580 devops-tool.component.ts:78 formarray {validator: null, asyncvalidator: null, _pristine: true, _touched: false, _oncollectionchange: function…}  12:42:03.583 devops-tool.component.ts:80 (7) [object, object, object, object, object, object, object]**

if using form array can set controls empty array:

removeallquestions() {   console.log(this.myform.get('devoptoolspojo'));   this.questionform.get('devoptoolspojo').controls = [];   console.log(this.myform.get('devoptoolspojo')); }

live plunker demo


Comments

Post a Comment

Popular posts from this blog

php - Vagrant up error - Uncaught Reflection Exception: Class DOMDocument does not exist -

i've set bento/ubuntu-16.04 vagrant box using php 5.6, , getting following error quite few times when try , run shell script: "uncaught reflection exception: class domdocument not exist". i've tried adding following top of script (not together), each no success: "sudo apt-get install php5.6-xml", "sudo apt-get install php5-xml", "sudo apt-get install php-dom" i've tried resetting server "sudo service apache2 restart". does have suggestions?
Read more

vue.js - Create hooks for automated testing -

Image
qa guys complained can't automate frontend testing. because our html looks same outside. lazy hack did this <template> <div :role="$options.name"> ... </div> </template> <script> export default { name: 'vmcomponentname' } </script> which takes name script , applies html. in browser get: <div role="vmcomponentname"> ... </div> line :role="$options.name" goes in every component. is there dry er solutions? please share. additional details i'll explain in details looking for. imagine have vmusercreate form creates user. test case can create user . to automatically test without role, have use following selector: .wrapper > .wrapper > .wrapper > .submit-button the test extremely brittle (will break lot). if use roles can use [role="vmusercreateform"] .submit-button selector. many folds less brittle. so basically, i'm ...
Read more

Add new key value to json node in java -

i have json file : { "id":1, "name":"abc", "addressdetails": { "city":"newyork" } } i wanted add 1 more key-value ("pincode" : "414141") node 'addressdetails'. i tried using : objectmapper mapper = new objectmapper(); jsonnode root = mapper.readtree(new file("d://test.json")); objectnode node = mapper.createobjectnode(); node.with("addressdetails").put("pincode", "414141"); but it's not getting added, there way can ? you can try you should modify file path objectmapper mapper = new objectmapper(); objectnode nodes = mapper.readvalue(new file("d:\\test.txt"), objectnode.class); nodes.with("addressdetails").put("pincode", "414141"); mapper.writer().writevalue(new file("d:\\test.txt"), nodes);
Read more