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


0

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

Lead = {
comment: []
}

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

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

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

Lead = {
comment: []
}

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

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

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

Источник
  •  1234
  •  1
  • 20 янв 2019 2019-01-20 14:20:02

1 ответ

0

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

Создаем саму форму:

import { Component } from @angular/core;
import { FormGroup, FormControl, Validators, AbstractControl } from @angular/forms;

@Component({ ... })
export class SomeComponent {
  public form = new FormGroup({
    comment: new FormControl(null, Validators.required)
  });

  public Lead = {
    comments: []
  };

  public get comment(): AbstractControl {
    return this.form.get(comment);
  }

  public save(): void {
    this.Lead.comments.push(this.comment.value);
  }
}

Создаем шаблон для этого:

<form [formGroup]="form" (ngSubmit)="save()">
  <mat-form-field>
    <input matInput formControlName="comment" placeholder="Новый комментарий">
    <mat-error *ngIf="comment.touched && comment.invalid">Нужно ввести комментарий</mat-error>
  </mat-form-field>

  <button mat-button color="primary" [disabled]="form.invalid" type="submit">Сохранить</button>
</form>

Чтобы не было пустых комментариев - нужно просто сделать проверку перед сохранением в базу:

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

<button (click)="saveComments()"></button>

Создаем также метод saveComments:

public saveComments(): void {
  const hasEmptyComment = this.Lead.comments.some((comment) => !comment.length);

  if (hasEmptyComment) {
    // Покажите какую-то ошибку
    return showSomeError();
  }

  // Сохраняем комментарии в базу
}