Значение инициализации Angular 7 formbuilder при множественном выборе недопустимой формы - PullRequest
Новая
       20

Значение инициализации Angular 7 formbuilder при множественном выборе недопустимой формы

0 голосов
/ 18 декабря 2018

У меня проблема с инициализацией группы from с выбором нескольких элементов управления.инициализация проходит нормально, но угловое пометить из как недопустимое. 

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

теперь, когда пользователь выбирает одну или несколько задач при множественном выборе, группа форм становится действительной. 

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

Iнужно, 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('.+')])],
        });
}

Ответы [ 2 ]

0 голосов
/ 19 декабря 2018

Проблема была в синхронизации!значения задач: ["3", "1", "5"] пришли из ajax.Итак, когда форма инициализируется значения: [].Чтобы решить проблему, я использовал метод controlPanelForm.patchValues ​​(...) для ответа ajax.Я надеюсь, что это будет полезно для других с той же проблемой.

0 голосов
/ 18 декабря 2018

Ваша форма определена с 

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

Их не существует!это означает, что ваш массив пуст, поэтому ваше значение пусто.

...