Как в angular создавать первый элемент при этом его не объявлять в ts?

Question

[Адель Халитов]

У меня есть объект массива:

Lead = {
comment: []
}

Хочу вывести для этого массива инпут, чтобы вбить туда какую то строку.

<mat-form-field *ngFor="let n of Lead.comment">
     <input type="tel" matInput [(ngModel)]="Lead.comment[n]" [ngModelOptions]="{standalone: true}" placeholder="comment">
</mat-form-field>

Естественно он не выведется, тк этот массив пуст.
Я изменяю этот массив, чтобы можно было вбить первый элемент:

Lead = {
comment: ['']
}

Все хорошо, инпут есть все отлично!
Допустим я сохранил Lead в базу, не введя в этот инпут ничего.

Далее я сделал страницу для вывода всех лидов, и сделал поле ввода нового комментария уже другим способом, объявив какую то новую переменную и в случае нажатия на какую то кнопку я пушу новый комментарий в массив Lead.comment.

В итоге и первый способ при создании нового элемента мне не нравится, так как в бд будет храниться пустая строка, и если я захочу вывести какой то Lead он мне выдаст пустой комментарий. И второй способ мне тоже не нравится, так как на странице будет много элементов.
Как правильно это делается?

Comments

[Ivan Stroykin]

Напишите ТЗ. То как Вы пытаетесь реализовать в корне не верно уже глядя на код

[Адель Халитов]

Ivan Stroykin, Да в том то и дело что не понимаю как реализовать правильно)
Вот смотрите, у меня есть страница создать лид - Lead (Вся информация хранится в объекте)
У лида есть допустим, имя(строка), номера телефонов(массив строк) и еще что то.
Я создаю в ангуляре объект,

Lead = {
name: '',
phones: []
}

Допустим это так, но чтобы я смог ввести данные с html в этот объекте, я создаю для него инпут поля.
Но вот эта конструкция:

<mat-form-field *ngFor="let n of Lead.phones">
     <input type="tel" matInput [(ngModel)]="Lead.phones[n]" [ngModelOptions]="{standalone: true}" placeholder="comment">
</mat-form-field>

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

Lead = {
name: '',
phones: ['']
}

По итогу в базе данных такой объект сохраняется с пустыми строками, а меня это не устраивает.

{
    "_id": {
        "$oid": "5c6c6006ed46f70824809388"
    },
    "contactPhones": [
        ""
    ],
    "contactEmail": [
        ""
    ],
    "comments": [
        {}
    ],
    "tasks": [],
    "firmName": "В этой базе массив contactPhone имеет пустую строку",
    "address": "",
    "contactName": "",
    "position": "",
    "lprsName": "",
    "parser2gis": "",
    "createdDate": {
        "$date": "2019-02-19T19:57:17.699Z"
    },
    "__v": 0
}

[Адель Халитов]

Ivan Stroykin, Вот пример.https://stackblitz.com/edit/angular-jsjnwk

Правильно ли я делаю, если да, то неужели так и должны сохраняться пустые строки в бд?

Answer 1

[Антон Швец]

Создайте еще блок с одним этим вашим инпутом, и на него *ngIf="Lead?.comment?.length===0"
Т.е. показывать инпут, если массив есть и он пустой.
А если массив не пустой, то покажет ваш let n of

Comments

[Адель Халитов]

Вам не сложно это на примере показать?
Чтобы еще при введении в этот инпут информация шла в этот объект

[Антон Швец]

Адель Халитов, не получилось у меня так на примере :)
Ваш пример вообще не рабочий, неправильно сделана форма в цикле.
Надо делать

<mat-form-field *ngFor="let n of Lead.phones; let index=index">
     <input type="tel" matInput [(ngModel)]="Lead.phones[index]" [ngModelOptions]="{standalone: true}" placeholder="comment">
</mat-form-field>

Но в этом случае стекблитц начинает тормозить и терять фокус.
Я сделал на реактивных формах. Не стал заморачиваться на иф, просто добавил проверку. Это проще и наглядней.
https://stackblitz.com/edit/angular-tthtky