在提交前多次填写表格并插入计数器

Question

我已经在这个表单中创建了一个表单和一个按钮(add +)，它允许我在最终验证之前多次插入表单。为此，我创建了一个接收不同插入的列表和一个计数器，它允许我知道插入的数量。但问题是，当我点击(添加+)计数器不增加，我收到这个错误:

core.js:6141 ERROR TypeError: ctx_r28.addaction is not a function
at AdvanceTableComponent_ng_template_46_Template_button_click_103_listener (advance-table.component.html:223)
at executeListenerWithErrorHandling (core.js:15192)
at wrapListenerIn_markDirtyAndPreventDefault (core.js:15227)
at HTMLButtonElement.<anonymous> (platform-browser.js:582)
at ZoneDelegate.invokeTask (zone-evergreen.js:402)
at Object.onInvokeTask (core.js:28499)
at ZoneDelegate.invokeTask (zone-evergreen.js:401)
at Zone.runTask (zone-evergreen.js:174)
at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:483)
at invokeTask (zone-evergreen.js:1596)

，我不能在列表中插入数据。

我的代码

<ng-template #editRecord let-modal>
<div class="modal-header editRowModal">
<h4 class="modal-title" id="modal-basic-title">
<div class="table-modal-header">
<div class="modal-about">
<div class="font-weight-bold p-t-10 font-17">
Création des actions</div>
</div>
</div>
</h4>
<button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
<span aria-hidden="true"><i class="material-icons">close</i></span>
</button>
</div>
<div class="modal-body">
<form [formGroup]="editForm" (ngSubmit)="onEditSave(editForm)">

<div class="row">
<div class="col-xl-2 col-lg-2 col-md-12 col-sm-12 mb-2">
<label>Domaine <span class="text-succes">*</span></label>
<input type="text" class="form-control" placeholder="Domaine" formControlName="domaine" readonly=""
required>
</div>
<div class="col-xl-2 col-lg-2 col-md-12 col-sm-12 mb-2">
<label> Id probleme<span class="text-succes" >*</span></label>
<input type="text" class="form-control" placeholder="id" formControlName="idprblm" readonly=""  >

</div>

<div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 mb-2">
<label >Personne(s) à notifier <span class="text-danger">*</span></label>
<select class="form-control"  required>
<option value="2" selected disabled>Ahmed</option>
<option value="3" selected disabled>Hasssan</option>
<option value="1" selected >Choisissez les personn</option>
</select>                    
</div>
</div>
<div class="row">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 mb-2">
<label> Cause du probleme<span class="text-danger">*</span></label>
<textarea type="textarea" class="form-control" formControlName="causeprblm" placeholder="Mentionner la cause source du probleme" ></textarea>

</div>

</div>



<div class="row">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 mb-2">
<label>Action<span class="text-danger">*</span></label>
<textarea type="textarea" class="form-control" formControlName="action" placeholder="Mentionner l'action éliminant la cause"
></textarea>
</div>
</div>
<div class="row">

<div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 mb-2">
<label>Responsable Action<span class="text-danger">*</span></label>
<input type="text" class="form-control" formControlName="respaction" placeholder="Mentionner le porteur de l'action"  required>

</div>
<div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 mb-2">
<label>Date de réalisation <span class="text-danger">*</span></label>
<input type="datetime" class="form-control" formControlName="daterealisation" placeholder="Mentionner la date de réalisation objective"  required>
</div>
<div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 mb-2">
<label>Statut <span class="text-danger">*</span></label>
<select class="form-control" formControlName="statut" required>
<option value="" selected disabled>Plan</option>
<option value="" selected disabled>Do</option>
<option value="" selected disabled>Check</option>
<option value="" selected disabled>Act</option>
<option value="" selected >Statut</option>

</select> 
</div>

</div>
<br/>
<div class="row">
<div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 mb-2">
<label class="font-weight-bold p-t-10 font-17">Méthodologie :</label>
<div class="col-sm-9">
<div class="form-check">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" formControlName="methodologie" id="customCheck2">
<label class="custom-control-label" for="customCheck2">8D</label>
</div>

</div>
</div>
</div>
<div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 mb-2">
<label class="font-weight-bold p-t-10 font-17" style="color: orange;">Escalade :</label>
<div class="col-sm-9">
<div class="form-check">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck4">
<label class="custom-control-label" for="customCheck4"> <i class="fas fa-arrow-circle-up" style="font-size: 24px; color: orange;"></i>
</label>
</div>

</div>
</div>
</div>

<div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 mb-2">
<label class="font-weight-bold p-t-10 font-17" style="color: orange;"></label>
<div class="col-sm-9">
<button  class="icon-button1" (click)="addaction()" style="background-color: #E8F7F4">
<span class="material-icons" style="font-size: 40px; color:#88D279

;" type="success">add_circle
</span>
<span class="icon-button__badge1" style="background-color:#C5E8BA
">{{countaction}}</span>
</button> 

</div>
</div>

</div>


<div class="modal-footer">
<button type="submit" class="btn btn-primary" [disabled]="!editForm.valid">Créer</button>
<button type="button" class="btn btn-light" (click)="modal.close()">Close</button>
</div>
</form>
</div>
</ng-template>

TS文件

countaction :number = 0;
actionlist: Array<object> = [];
editForm: FormGroup;
constructor( private fb: FormBuilder,){
this.editForm = this.fb.group({
domaine:  ['', [Validators.required]],
idprblm:  ['', [Validators.required]],
persnotif: [''],
causeprblm:  ['', [Validators.required]],
action:  ['', [Validators.required]],
respaction:  ['', [Validators.required]],
daterealisation:  ['', [Validators.required]],
statut:  ['', [Validators.required]],
methodologie:  ['', [Validators.required]],
excalade:  ['', [Validators.required]],
});}
//add action 
onAddAction(form:FormGroup) {
this.actionlist.push(form.value);
this.countaction = ++this.countaction;
console.log(this.actionlist)
}

Answer 1

我认为这个问题有一个简单的解决方案，我检查了HTML代码，我发现了"addaction"我相信这是用来增加计数的。但是我没有在组件中找到任何具有相同名称的函数，所以您可以在ts文件中添加函数名称。

public addaction() {
this.countaction = ++this.countaction;
console.log(this.countaction); 
}

或

public onAddAction() { // remove the parameter
this.actionlist.push(this.editForm.value); // this will give you the form values
this.countaction = ++this.countaction;
console.log(this.actionlist)
}
//in Html code
<button  class="icon-button1" (click)="onAddAction()" style="background-color: #E8F7F4"> // change the function name
<span class="material-icons" style="font-size: 40px; color:#88D279;" type="success">add_circle</span>
<span class="icon-button__badge1" style="background-color:#C5E8BA">{{countaction}}</span>
</button>