Angular 7 formbuilder在多选获取表单上初始化值无效答案

【问题标题】：Angular 7 formbuilder initialize value on multi-select get form invalidAngular 7 formbuilder在多选获取表单上初始化值无效
【发布时间】：2019-05-18 21:41:42
【问题描述】：

我在使用选择多个控件初始化 fromgroup 时遇到问题。初始化运行正常，但角度将 from 标记为无效。

{{controlPanelForm.value | json}} -> tasks: ["3","1","5"]
{{controlPanelForm.status | json}} -> "INVALID"

现在，当用户在多选中选择一个或多个任务时，表单组变得有效。

{{controlPanelForm.value | json}} -> tasks: ["3","1","5"]
{{controlPanelForm.status | json}} -> "VALID"

我需要，formGroup 从初始化开始就有效。提前致谢。 ////html

<form [formGroup]="controlPanelForm" (ngSubmit)="submit()">
    <select multiple id="tasks" size="7" [formControl]="controlPanelForm.get('tasks')">
        <option *ngFor="let t of projectTasks" [ngValue]="t.id">{{t.title}}</option>
    </select>
</form>
<div>
    {{controlPanelForm.value | json}}
</div>
<div>
    {{controlPanelForm.status | json}}
</div>

/////ts

controlPanelForm: FormGroup;
projectTasks: ProjectTask[] =[
    {id:'3', title:'title3'},
    {id:'1', title:'title1'},
    {id:'5', title:'title5'},
]
projectTasksIds: string[];

ngOnInit() {
    this.projectTasks.map((t) => {
        this.projectTasksIds.push(t.id.toString());
    });
    this.buildForm();
}

buildForm(): void {
        this.controlPanelForm = this.fb.group({
            'tasks': [[this.projectTasksIds], Validators.compose([Validators.required, Validators.pattern('.+')])],
        });
}

【问题讨论】：

标签： angular validation formbuilder

【解决方案1】：

您的表单是用

定义的

'tasks': [[this.projectTasksIds], ...

这意味着一旦被请求，你的价值就变成了

form.tasks = [[1, 2, 3]]

但这不是问题（尽管您应该纠正它）。问题是你有这些数据

projectTasks: ProjectTask[] =[
    {id:'3', title:'title3'},
    {id:'1', title:'title1'},
    {id:'5', title:'title5'},
]

然后你迭代这个

this.projectTasks.tasks.map(...)

它不存在！这意味着你的数组是空的，所以你的值是空的。

【讨论】：

对不起，毛毛虫。问题是复制/粘贴。 this.projectTasks.map(...) 现在是正确的。请再检查一次。谢谢

【解决方案2】：

问题是同步！ tasks: ["3","1","5"] 的值来自 ajax。因此，当表单初始化时，值是：[]。为了解决问题，我在 ajax 响应上使用了 controlPanelForm.patchValues(...) 方法。我希望这对其他有同样问题的人有所帮助。

【讨论】：