Angular 下拉表单上的 4 个动态反应表单 API [添加和删除]

Question

我在 angular 4 个项目中遇到了这个问题如果您能抽空解决这个问题，我将不胜感激。

Objective

在下拉列表值发生变化时，我们需要根据返回值调用 API，我们需要填充表单数据。 [API 将遵循相同的对象结构]

我在块中提到的for循环并不是运行完全清空表单控件数组。
我已经检查了 FormGroup 和 FormArray 类没有删除所有控件的方法。
可能是方法不正确，因为对 angular4.
源代码片段：

    availableToolsForNewEvnList: Array<ToolsForNewEvn>;
    selectedToolsForNewEvnList: Array<ToolsForNewEvn>;

    getProjects() { //Working Fine
        this.devopsToolService.getProjects()
            .subscribe(
            projectList => {
                this.projectList = projectList as 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 as DevopToolsPojo[];
                let control = <FormArray>this.myForm.controls['devopToolsPojo'];//ERROR in this block:Start
                console.log("BEFORE" + control.length);
                console.log(control);
                for (let i = 0; i < control.length; i++) {
                    console.log("Loop [ " + control.length + " ]");
                    console.log(control);
                    control.removeAt(i)
                }
                console.log("AFTER" + control.length);
                console.log(control);//ERROR in this 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 as DevopToolsPojo[];
            },
            error => this.errorMessage = <any>error);
    }

    getNewDevopToolsPojo(projectId: number) { //Working Fine
        this.devopsToolService.getNewDevopToolsPojo(projectId)
            .subscribe(
            tl => {
                this.availableToolsForNewEvnList = tl as 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>();
    }

控制台日志：

**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 are 3 more records to be 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]**

Answer 1

如果您使用的是 Form array，您可以将控件设置为空数组：

removeAllQuestions() {
  console.log(this.myForm.get('devopToolsPojo'));
  this.questionForm.get('devopToolsPojo').controls = [];
  console.log(this.myForm.get('devopToolsPojo'));
}

Live plunker demo

Answer 2

您正在从正在迭代的数组中删除项目，无论您使用什么技术，这都不是一个好主意。

您可以创建正在迭代的数组的副本，并在迭代原始数组时从重复数组中删除项目

或

遍历一个数组，但如果原始数组中的某个项目满足某些条件，则构建一个新数组。

在任何情况下，避免添加和删除项目（从您正在迭代的数组）都会让您省去很多麻烦。

Angular 下拉表单上的 4 个动态反应表单 API [添加和删除]

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

angular

angular4-forms

Objective

控制台日志：