How to dynamically add and delete rows in a table through form

تبليغ
سؤال

يرجى شرح بإيجاز لمإذا تشعر أنك ينبغي الإبلاغ عن هذا السؤال.

تبليغ
‎إلغاء

I’m trying to make the results of the inputs appear on the table, but I can’t, I’ve looked in several places and I don’t know what else to do, can you tell me what’s wrong?

This error appears in the terminal:
terminal

Error: src/app/components/template/form/form.component.html:67:25 – error TS2339: Property ‘item’ does not exist on type ‘FormComponent’.

67 {{item.endereco}}
~~~~

src/app/components/template/form/form.component.ts:7:16
7 templateUrl: ‘./form.component.html’,
~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component FormComponent.

Error: src/app/components/template/form/form.component.html:68:25 – error TS2339: Property ‘item’ does not exist on type ‘FormComponent’.

68 {{item.descricao}}
~~~~

src/app/components/template/form/form.component.ts:7:16
7 templateUrl: ‘./form.component.html’,
~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component FormComponent.

Angular:

import { Component, OnInit } from ‘@angular/core’;
import { FormBuilder, FormGroup, Validators } from ‘@angular/forms’;

@Component({
selector: ‘app-form’,
templateUrl: ‘./form.component.html’,
styleUrls: [‘./form.component.css’]
})
export class FormComponent implements OnInit {

formu: FormGroup;
listData: any;

constructor(
private fb: FormBuilder){

this.listData = [];

this.formu = this.fb.group({
codigo: [“”, [Validators.required]],
nome: [“”, [Validators.required]],
nascimento: “”,
endereco: “”,
descricao: “”
})

}

public addItem(): void {
this.listData.push(this.formu);
}

ngOnInit(): void {
}

}
<form [formGroup]=”formu”>
<span>
<label for=”” class=”form-label”>Código*:</label>
<br>
<input type=”text” formControlName=”codigo” placeholder=”0000″>
<div *ngIf=”formu.get(‘codigo’)?.errors?.[‘required’] && formu.get(‘codigo’)?.touched”>
Código obrigatório
</div>
<br>
</span>
<label for=”” class=”form-label”>Nome*:</label>
<br>
<input type=”text” placeholder=”Nome Completo” formControlName=”nome”>
<div *ngIf=”formu.get(‘nome’)?.errors?.[‘required’] && formu.get(‘nome’)?.touched”>
Nome obrigatório
</div>
<br>
<label for=”” class=”form-label”>Data de Nascimento:</label>
<br>
<input type=”date” formControlName=”nascimento”>
<br>
<label for=”” class=”form-label”>Endereço:</label>
<br>
<input type=”text” formControlName=”endereco”>
<br>
<label for=”” class=”form-label”>Descrição:</label>
<br>
<textarea name=”” id=”” cols=”30″ rows=”10″ formControlName=”descricao”></textarea>
<br>
<br>
<button (click)=”addItem()” class=”btn btn-primary mb-3″>Salvar</button>
</form>
<div>
<table class=”table table-success table-striped”>
<thead>
<tr>
<th scope=”col”></th>
<th scope=”col”>Código</th>
<th scope=”col”>Nome</th>
<th scope=”col”>Data de Nascimento</th>
<th scope=”col”>Endereço</th>
<th scope=”col”>Descrição</th>
</tr>
</thead>
<tbody>
<tr>
<th scope=”row”>1</th>
<td>0001</td>
<td>Andressa Lima</td>
<td>07/04/2004</td>
<td>Rua das Palmeiras</td>
<td>Gosta de ler</td>
</tr>
<tr>
<th scope=”row”>2</th>
<td>0002</td>
<td>Maria Laurentino</td>
<td>28/03/1969</td>
<td>Rua JK</td>
<td>É detalhista</td>
</tr>
<tr>
<th scope=”row” *ngFor=”let item of listData”></th>
<td><span>{{item.codigo}}</span></td>
<td><span>{{item.nome}}</span></td>
<td><span>{{item.nascimento}}</span></td>
<td><span>{{item.endereco}}</span></td>
<td><span>{{item.descricao}}</span></td>
</tr>
</tbody>
</table>
</div>

0
X 5 أشهر 2022-07-10T12:04:15+03:00 0 إجابة 1 مشاهدات مبتدئ 0

‫أضف إجابة

تصفح
تصفح

مجهول يجيب