Angular 7 formbuilder 初始化值 multi-select 获取表单无效

Question

我在使用 select 多重控件初始化 fromgroup 时遇到问题。初始化运行正常，但是 angular 将 from 标记为无效。

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

现在，当用户 select 在多 select 上执行一项或多项任务时，表单组将生效。

{{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('.+')])],
        });
}

Answer 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(...)

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

Answer 2

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

Angular 7 formbuilder 初始化值 multi-select 获取表单无效

Angular 7 formbuilder initialize value on multi-select get form invalid

validation

formbuilder

angular