在提交和插入计数器之前多次填写表格
Fill form multiple time before submit and insert counter
我在这个表单中创建了一个表单和一个按钮 (add +)，它允许我在最终验证之前多次插入表单。为此，我创建了一个接收不同插入的列表和一个让我知道插入次数的计数器。但问题是，当我点击 (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)
}
我认为这个问题有简单的解决方法，我检查了 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>
我在这个表单中创建了一个表单和一个按钮 (add +)，它允许我在最终验证之前多次插入表单。为此，我创建了一个接收不同插入的列表和一个让我知道插入次数的计数器。但问题是，当我点击 (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)
}
我认为这个问题有简单的解决方法，我检查了 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>