Как работать с отображаемыми данными в большой форме - PullRequest
Новая
       114

Как работать с отображаемыми данными в большой форме

0 голосов
/ 06 августа 2020

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

Я использую Angular и его реактивные формы. У меня есть классы форм, службы составления форм и все остальное.

Пример домена

У меня есть структура данных, в которой можно редактировать большинство частей: 

interface Project {
    id: number,
    name: string,
    owner: Person,
    todos: Todo[]
}
    
interface Person {
    name: string,
    occupation: string,
}

interface Todo {
    id: number,
    title: string,
    description: string,
    creator: Person,
    owner: Person,
    history: TodoStateChange[],
}

interface TodoStateChange {
    doneAt: Date,
    doneBy: Person,
    fieldChanges: {name: string, value: string}[]
}

I иметь одну структуру формы со всем проектом и всеми todos в них. С этим todos, owner должен быть изменяемым. creator никогда не изменится и должен отображаться только как текстовый элемент (без полей ввода).

Настоящая суета - это history. Меняется только на сервере. Он никогда не изменится на клиенте и будет отображаться как интерактивный, доступный для просмотра список без возможности его редактирования.

Как мне реализовать компонент для визуализации истории?

Как я сейчас сделать это

Родительский компонент todo.component.ts получает форму: 

@Input() form: FormGroup;

и передает его в представление todo.component.html: 

<app-todo-history [form]="form.controls.history"></app-todo-history>

Итак, я получил только форма в дочернем компоненте todo-history.component.ts

@Input() form: FormGroup;

и разберитесь с этим в представлении todo-history.component.html: 

Date: {{ form.controls.doneAt.value }}

Что меня беспокоит

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

Как я бы хотел, чтобы это работало

Я хотел бы, чтобы дочерний компонент выглядел так:

todo-history.component.ts: 

@Input() stateChanges: TodoStateChange[];

todo-history.component.html: 

Date: {{ stateChange.doneAt }}

Поэтому моему todo.component.ts потребуется чтобы также получить данные модели с самого верха, а также передать их вниз. Мне не нравится эта избыточность.

Другой способ заставить его работать - установить значение FormControl history, чтобы не было FormArray, а установить TodoStateChange[] как значение . Таким образом, моя форма кажется довольно неопрятной с некоторыми подразумеваемыми знаниями, необходимыми для ее использования.

Есть ли какие-то очевидные идеи, которые я упустил?

...