We Keep Coding

Edit PDF form html and JS

enter image description here
hallo please help me...
I'm working on an electronic signature application using the API, now here I have a pdf that will be sent to the API for signature, how do I get this logo image to enter the pdf iframe when dragging?, here I use pure javascript for such draggable images and coordinate x,y..
This form acts to the controller and the contents of the controller are directly posted to the API.
if you can't?, is there an open source for editing pdf?, I'm looking for these plugins mostly paid.
and is there any suggestion to edit the pdf?
an example of the form I use with javascript
#section('content')
<form action="{{ route('surat.sign', $surat->surat_tte_id) }}" method="POST" enctype="multipart/form-data">
#csrf
<!-- ROW-1 OPEN -->
<div class="row">
<div class="col-md-12 col-lg-12">
<div class="card">
<div class="card-header">
<h3 class="mb-0 card-title"> Sign Surat Tanda Tangan Elektronik </h3>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="form-label"> Nik </label>
<input type="text" class="form-control" name="nik" placeholder="" value="{{ Auth::user()->nik }}" required readonly>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="form-label"> Name </label>
<input type="text" class="form-control" placeholder="" value="{{ Auth::user()->name }}" readonly>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="form-label"> Pasphrase </label>
<input type="password" class="form-control" name="pasphrase" placeholder="Masukan Pasphrase Wajib diisi" required>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="form-label"> Pilih Jenis Tanda Tangan </label>
<select class="form-control select2-show-search" data-placeholder="Pilih Jenis Tanda Tangan" name="tampilan" required>
<option label="Pilih Jenis Tanda Tangan"></option>
<option value="visible"> Visible </option>
<option value="invisible"> Invisible </option>
</select>
#error('tampilan')
<div class="invalid-feedback">{{ $message }}</div>
#enderror
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="form-label"> QRCode </label>
<input type="text" class="form-control" name="linkQR" placeholder="QRCode">
</div>
<span class="text-danger">*) jika menggunakan gambar visible, QRCode Boleh Tidak Diisi | Jika dipakai silakan diisi </span>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="form-label"> Pilih Jenis Image </label>
<select class="form-control select2-show-search" data-placeholder="Pilih Jenis Image" name="image">
<option label="Pilih Jenis Image"></option>
<option value="true"> True </option>
<option value="false"> False </option>
</select>
#error('image')
<div class="invalid-feedback">{{ $message }}</div>
#enderror
<span class="text-danger">*) jika false, linkQR harus di isi </span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="form-label"> Page/Halaman </label>
<input type="text" class="form-control" placeholder="Halaman" value="" name="page" required>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="form-label"> Kordinat X </label>
<input type="text" class="form-control" placeholder="Jika menggunakan Visible, Kordinat Posisi Gambar automatis" value="" name="xAxis" id="resultsX" readonly>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="form-label"> Kordinat Y </label>
<input type="text" class="form-control" placeholder="Jika menggunakan Visible, Kordinat Posisi Gambar automatis" value="" name="yAxis" id="resultsY" readonly>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="form-label"> Height Gambar </label>
<input type="text" class="form-control" placeholder="Jika menggunakan Visible, height gambar contoh 500" value="" name="yAxis" maxlength="3">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="form-label"> Width Gambar </label>
<input type="text" class="form-control" placeholder="Jika menggunakan Visible, height gambar contoh 500" value="" name="yAxis" maxlength="3">
</div>
</div>
<div class="col-lg-6">
<div class="card shadow">
<div class="card-header">
<h3 class="mb-0 card-title">Image</h3>
</div>
<div id="uploader" onclick="$('#filePhoto').click()">
<img src="" id="box"/>
</div>
<input type="file" name="imageTTD" id="filePhoto" />
<span class="text-danger">*) jika menggunakan gambar visible, QRCode Boleh Tidak Diisi | Gambar jpg,jpeg,png </span>
</div>
</div>
<div class="col-md-12">
#if($surat->file == null)
<p> surat anda belum di cetak, silakan cetak di menu verifikasi</p>
#else
<input type="file" class="form-control" name="file" value="{{ $surat->file }}" style="display:none;"/>
<iframe src="{{ asset('storage/surat/'.$surat->file) }}" type="application/pdf" style="width: 100%; height: 900px; padding: 0;"></iframe>
#endif
</div>
</div>
</div>
<div class="card-footer">
<i class="fa fa-arrow-left"></i> Kembali
<button type="submit" class="btn btn-outline-success">Simpan <i class="fa fa-send"></i></button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
#endsection
#section('js')
<!-- SELECT2 JS -->
<script src="{{ URL::asset('assets/plugins/select2/select2.full.min.js') }}"></script>
<script src="{{ URL::asset('assets/plugins/fileuploads/js/fileupload.js') }}"></script>
<script src="{{ URL::asset('assets/plugins/fileuploads/js/file-upload.js') }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
// Select2
$('.select2').select2({
minimumResultsForSearch: Infinity
});
// Select2 by showing the search
$('.select2-show-search').select2({
minimumResultsForSearch: ''
});
</script>
<!-- X dan Y TTD -->
<script type="text/javascript">
var coordinates = function(element) {
element = $(element);
var top = element.position().top;
var left = element.position().left;
$('#resultsX').val('X: ' + left);
$('#resultsY').val('Y: ' + top);
}
$('#box').draggable({
start: function() {
coordinates('#box');
},
stop: function() {
coordinates('#box');
}
});
</script>
<!-- drag and drop gambar -->
<script type="text/javascript">
var imageLoader = document.getElementById('filePhoto');
imageLoader.addEventListener('change', handleImage, false);
function handleImage(e) {
var reader = new FileReader();
reader.onload = function (event) {
$('#uploader img').attr('src',event.target.result);
}
reader.readAsDataURL(e.target.files[0]);
}
var dropbox;
dropbox = document.getElementById("uploader");
dropbox.addEventListener("dragenter", dragenter, false);
dropbox.addEventListener("dragover", dragover, false);
dropbox.addEventListener("drop", drop, false);
function dragenter(e) {
e.stopPropagation();
e.preventDefault();
}
function dragover(e) {
e.stopPropagation();
e.preventDefault();
}
function drop(e) {
e.stopPropagation();
e.preventDefault();
//you can check e's properties
//console.log(e);
var dt = e.dataTransfer;
var files = dt.files;
//this code line fires your 'handleImage' function (imageLoader change event)
imageLoader.files = files;
}
</script>
#endsection

jquery.repeater with bootstrap custom-switch failure

Good Evening,
I have a problem with the jquery form repeater plugin and bootstrap.
I have this form element witch is part of the repeater form:
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="questionSwitch" name="question_correct[]">
<label class="custom-control-label" for="questionSwitch">Richtige Antwort</label>
</div>
Now is the problem if the repeater repeat this element and I click on the second or third repeated item on the switch the switch on the first item get changed not the one I clicked. Because they all three have the same id.
Does anyone have an idea how to fix this? Its the first time working with the form repeater.
Here is a bit more of the Code
$(function () {
'use strict';
if (!$('#multiple-choice').attr('checked')) {
$('#questions').hide();
}
$('#multiple-choice').on('click', function () {
if (this.checked)
$('#questions').show();
else $('#questions').hide();
});
// form repeater jquery
$('#whitelist-new-question').repeater({
show: function () {
$(this).slideDown();
// Feather Icons
if (feather) {
feather.replace({ width: 14, height: 14 });
}
},
hide: function (deleteElement) {
if (confirm('Möchten Sie diese Antwort wirklich löschen?')) {
$(this).slideUp(deleteElement);
}
}
});
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.repeater/1.1.2/jquery.repeater.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.28.0/feather.min.js"></script>
<div class="card">
<div class="card-body">
<form class="form form-vertical" action="{{ route('whitelist-new-question') }}" method="post"
id="whitelist-new-question">
<div class="row">
#csrf
<div class="col-12">
<div class="form-group">
<label for="question-title">Titel</label>
<input type="text" class="form-control" id="question-title" name="questionTitle"
value="{{ old('questionTitle') }}" />
</div>
</div>
<div class="col-12">
<div class="form-group">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="question-required"
name="questionRequired" value="1"
{{ old('questionRequired') == '1' ? 'checked' : '' }}>
<label class="custom-control-label" for="question-required">Immer Fragen</label>
</div>
</div>
</div>
<div class="col-12">
<div class="form-group">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="multiple-choice" name="multiChoice"
value="1" {{ old('multiChoice') == '1' ? 'checked' : '' }}>
<label class="custom-control-label" for="multiple-choice">Multiple Choice</label>
</div>
</div>
</div>
<div class="col-12" id="questions">
Antworten
<hr />
<div data-repeater-list="questions">
<div data-repeater-item>
<div class="row d-flex align-items-end">
<div class="col-md-4 col-12">
<div class="form-group">
<label for="question-text">Text</label>
<input type="text" class="form-control" id="question-text"
name="question_text[]" aria-describedby="question-text" />
</div>
</div>
<div class="col-md-2 col-12 mt-auto mb-auto">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="currect-switch"
name="question_correct[]">
<label class="custom-control-label" for="currect-switch">Richtige
Antwort</label>
</div>
</div>
<div class="col-md-2 col-12 mb-50">
<div class="form-group">
<button class="btn btn-outline-danger text-nowrap px-1" data-repeater-delete
type="button">
<i data-feather="x" class="mr-25"></i>
<span>Löschen</span>
</button>
</div>
</div>
</div>
<hr />
</div>
</div>
<div class="row">
<div class="col-12">
<button class="btn btn-icon btn-primary" type="button" data-repeater-create>
<i data-feather="plus" class="mr-25"></i>
<span>Weitere Antwort</span>
</button>
</div>
</div>
</div>
<div class="col-12">
<button type="submit" class="btn btn-success mt-2">Speichern</button>
</div>
</div>
</form></div></div>

Ok i got a fix for that.
in the js script i created a variable number and added this code in the show event of the repeater:
show: function () {
var inputSwitch = $(this).find('.custom-control-input');
var labelSwitch = $(this).find('.custom-control-label');
var id = 'currect-switch-' + number;
inputSwitch.attr("id", id);
labelSwitch.attr("for", id);
$(this).slideDown();
// Feather Icons
if (feather) {
feather.replace({ width: 14, height: 14 });
}
number++;
},

jQuery Cloning and incrementing input, textarea, that has name, id and for

I'm still very new to jQuery, and would need help to how to increment 3 elements in this code.
name, id & for.
The name consist of products[0]category, id consist of checkbox[0], for consist of checkbox[0] which is for labels on the checkbox that id use.
I've tried searching for examples. But all them haven't found any good results that i could learn from unfortunately. So in the codes below, they're not there to increase increment as i have totally no idea what else i can do to increase increment numbering.
$(document).ready(function() {
let $append = $('#append');
// append location's data listing
$append.on('change', '.location', function(){
var value = $(this).val();
$('.location_id').val($('#locations [value="'+value+'"]').data('locationid'));
$('.loc_desc').val($('#locations [value="'+value+'"]').data('locdesc'));
});
// enable checkbox for serialnumbers
$append.on('change','.enable-serial', function(){
let $item = $(this).closest('.product-item');
let $checkbox = $item.find('.enable');
$checkbox.prop('disabled', !this.checked);
});
// ctrl for key in checkbox
$append.on('click', '.keyin-ctrl', function() {
let $container = $(this).closest('.product-item');
let $serial = $container.find('.serial');
$container.find('.display').val(function(i, v) {
return v + $serial.val() + ';\n';
});
$serial.val('').focus();
});
// ctrl for del textarea
$append.on('click', '.undo-ctrl', function() {
let $container = $(this).closest('.product-item');
$container.find('.display').val('');
});
// clone product, increment products[x]var
$('#add_product').on('click', function() {
var itemNo = $('.product-item').length + 1;
var index = $('.product-item').length;
var regex = /^(.+?)(\d+)$/i;
let $product = $append.find('.product-item.template')
.clone()
.show()
.removeClass('template')
.insertAfter('.product-item:last');;
$product.find('span').text('#' + itemNo);
$product.find(':checkbox').prop('checked', false);
$product.find('.enable').prop('disabled', true);
$product.find('input, textarea').val('');
$('#append').append($product);
});
// delete product, but remain original template intact
$('#delete_product').on('click', function(){
var itemNo = $('.product-item').length + 1;
let $product = $append.find('.product-item:last:not(".template")');
$product.remove();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main class="shadow border">
<h4>{{ __('Product Details') }}</h4>
<hr>
<form method="post" action="">
<!-- Multiple Product addition -->
<div class="form-group row">
<label class="col-sm-2 col-form-label font-weight-bold">{{ __('Product Setting') }}</label><br/>
<div class="col-sm-5">
<button type="button" id="add_product" class="btn btn-dark">{{ __('Add Product') }} <i class="fas fa-plus-square"></i></button>
<button type="button" id="delete_product" class="btn btn-dark ml-3">{{ __('Delete Last Product') }} <i class="fas fa-minus-square"></i></button>
</div>
</div>
<hr>
<!-- Frist Group -->
<div class="product" id="append">
<!-- Product Details -->
<div class="product-item template">
<span>#1</span>
<div class="form-group row">
<label class="col-sm-2 col-form-label font-weight-bold">{{ __('Category') }}</label>
<div class="col-sm-2">
<input class="form-control" name="products[0]category" type="text" placeholder="eg. 333" maxlength="3"required>
</div>
<label class="col-sm-1 col-form-label font-weight-bold">{{ __('Code') }}</label>
<div class="col-sm-2">
<input class="form-control" name="products[0]code" type="text" placeholder="eg. 22" maxlength="2" required>
</div>
<label class="col-sm-1 col-form-label font-weight-bold">{{ __('Partnumber') }}</label>
<div class="col-sm-2">
<input class="form-control" name="products[0]partnumber" type="text" placeholder="eg. NGH92838" required>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label font-weight-bold">{{ __('Brand') }}</label>
<div class="col-sm-2">
<input class="form-control" name="products[0]brand" type="text" placeholder="eg. Rototype" required>
</div>
<label class="col-sm-1 col-form-label font-weight-bold">{{ __('Quantities') }}</label>
<div class="col-sm-2">
<input class="form-control" name="products[0]qty" type="number" placeholder="eg. 1" required>
</div>
<label class="col-sm-1 col-form-label font-weight-bold">{{ __("Location") }}</label>
<div class="col-sm-2">
<input class="form-control location" type="text" name="products[0]loc_name" list="locations" value="">
<input type="hidden" class="location_id" name="products[0]location_id" value="">
<input type="hidden" class="loc_desc" name="products[0]loc_desc" value="">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label font-weight-bold">{{ __("Description") }}</label>
<div class="col-sm-8">
<input class="form-control" name="products[0]description" type="text" placeholder="eg. Spare part for CSD2002">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label font-weight-bold">{{ __('Seial Number(s)') }}</label>
<div class="col-sm-5">
<input class="form-control enable serial" maxlength="25" placeholder="Key in Serial Number and hit button 'Key In'" disabled>
</div>
<div class="col-sm-5">
<button class="btn btn-dark enable keyin-ctrl" type="button" disabled>{{ __('Key In') }}</button>
<button class="btn btn-dark enable undo-ctrl" type="button" disabled>{{ __('Del') }}</button>
<input class="form-check-input ml-4 mt-2 pointer enable-serial" id="checkbox[0]" type="checkbox">
<label class="form-check-label ml-5 pointer" for="checkbox[0]">{{ __('tick to enable serialnumber')}}</label>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label"></label>
<div class="col-sm-5">
<textarea class="form-control display" name="products[0]serialnumbers" rows="5" style="resize: none;" placeholder="eg. SGH8484848" readonly></textarea>
</div>
</div>
<hr>
</div>
<!-- append start -->
</div>
<div class="form-group row">
<div class="col-sm-12 ">
#csrf
<button type="submit" class="btn btn-dark float-right ml-4">Next <i class="fas fa-caret-right"></i></button>
<!--<button type="button" class="btn btn-secondary float-right" onclick="history.back()">Previous</button>-->
</div>
</div>
<datalist id="locations">
#foreach($locations as $location)
<option value="{{ $location->loc_name}}" data-locationid="{{ $location->location_id }}" data-locdesc="{{ $location->loc_desc }}"></option>
#endforeach
</datalist>
</form>
</div>
</main>
So how do I actually achieve this to add increment to the NAME, ID and FOR my clones?
From the original template of products[0]variable to products[1]variable, checkbox[0] to checkbox[1]

If you want to increment either an ID, class, etc. you can't use .clone(), like the documentation warns:
Using .clone() has the side-effect of producing elements with
duplicate id attributes, which are supposed to be unique. Where
possible, it is recommended to avoid cloning elements with this
attribute or using class attributes as identifiers instead.
You'll have to do it "manually", following a very simple example below:
$( "#addrow" ).click(function() {
var count = $("#product").children().length;
$("#product").append("<input id='field[" + count + "]' type='text'>");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="product">
</div>
<input id="addrow" type="button" value="Add field">

Angular 6 dynamic rows resets while adding

add purchase html
<div class="d-flex justify-content-center align-items-center">
<div class="col-md-12 border">
<div class="card-header header-elements-inline">
<h4 class="card-title">Add Purchase</h4>
<button [mat-dialog-close]="true" type="button" class="bootbox-close-button close" data-dismiss="modal"
aria-hidden="true">×</button>
</div>
<form action="" #addPurchaseForm="ngForm" class="purchaseForm" (ngSubmit)="addPurchase(addPurchaseForm)" method="POST">
<div class="card-body">
<div class="col-md-12">
<div class="row justify-content-center">
<div class="col-md">
<div class="form-group form-group-float">
<label class="form-group-float-label is-visible">Select vendor to add product</label>
<ng-select [items]="vendorData" bindLabel="vendor_name" bindValue="vendor_id" name="vendor_name" #vendor_name="ngModel"
[searchable]="false" required appendTo="body" [closeOnSelect]="true" [(ngModel)]="purchaseDetails.vendor_id">
</ng-select>
<span *ngIf="addPurchaseForm.submitted && vendor_name.errors?.required" class="form-text text-danger">Product Sub
Vendor
is
Required</span>
</div>
</div>
<div class="col-md">
<div class="form-group form-group-float">
<label class="form-group-float-label is-visible">Reciept No</label>
<input [(ngModel)]="purchaseDetails.reciept_no" name="reciept_no" #reciept_no="ngModel" type="text" required class="form-control">
<span *ngIf="addPurchaseForm.submitted && reciept_no.errors?.required" class="form-text text-danger">Product code
is
Required</span>
</div>
</div>
<div class="col-md">
<div class="form-group form-group-float">
<label class="form-group-float-label is-visible">Purchased At</label>
<mat-form-field>
<input [(ngModel)]="purchaseDetails.purchased_at" name="purchased_at" #purchased_at="ngModel" required class="form-control" matInput [matDatepicker]="picker" placeholder="Choose a date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
<!-- <input [(ngModel)]="purchaseDetails.purchased_at" name="purchased_at" #purchased_at="ngModel" type="text" required class="form-control"> -->
<span *ngIf="addPurchaseForm.submitted && purchased_at.errors?.required" class="form-text text-danger">Product code
is
Required</span>
</div>
</div>
</div>
<h4 class="card-title">Purchase Details</h4>
<mat-dialog-content style="max-height:200px">
<div class="row" *ngFor="let purchaseDetail of purchaseDetails; let i = index;">
<div class="col-md">
<div class="form-group form-group-float">
<label class="form-group-float-label is-visible">Select Product</label>
<ng-select [items]="productData" bindLabel="product_name" bindValue="product_id" name="vendor_name" #product[i]="ngModel"
[searchable]="false" required appendTo="body" [closeOnSelect]="true" [(ngModel)]="purchaseDetails[i].product_id">
</ng-select>
<span *ngIf="addPurchaseForm.submitted && vendor_name.errors?.required" class="form-text text-danger">Product Sub
Vendor
is
Required</span>
</div>
</div>
<div class="col-md">
<div class="form-group form-group-float">
<label class="form-group-float-label is-visible">Unit Rate</label>
<input mask="0*.0*" value="{{purchaseDetails[i].rate}}" [(ngModel)]="purchaseDetails[i].rate" name="product_rate" #rate[i]="ngModel" type="text" required class="form-control">
<span *ngIf="addPurchaseForm.submitted && code.errors?.required" class="form-text text-danger">Rate
is
Required</span>
</div>
</div>
<div class="col-md">
<div class="form-group form-group-float">
<label class="form-group-float-label is-visible">Quantity</label>
<input mask="0*" value="{{purchaseDetails[i].quantity}}" [(ngModel)]="purchaseDetails[i].quantity" name="product_quantity" #quantity[i]="ngModel" type="text" required class="form-control">
<span *ngIf="addPurchaseForm.submitted && code.errors?.required" class="form-text text-danger">Quantity
is
Required</span>
</div>
</div>
<!-- <div class="col-md">
<div class="form-group form-group-float">
<label class="form-group-float-label is-visible">Price</label>
<input disabled [(ngModel)]="purchaseDetails[i].quantity * purchaseDetails[i].rate" name="product_price" #price="ngModel" type="text" required
class="form-control">
<span *ngIf="addPurchaseForm.submitted && code.errors?.required" class="form-text text-danger">Price
is
Required</span>
</div>
</div> -->
<div class="col-md-1 align-self-md-center">
<i (click)="removePurchaseDetail(i)" class="icon-minus-circle2 cursor-pointer fs-22 text-danger"></i>
</div>
</div>
</mat-dialog-content>
<div class="row justify-content-center mb-25">
<i (click)="addNewPurchaseDetail()" class="icon-plus-circle2 fs-22 cursor-pointer text-indigo-800"></i>
</div>
</div>
<div class="text-center">
<button type="submit" [disabled]="!purchaseDetails.vendor_id" class="btn btn-primary">Add purchase <i class="icon-paperplane ml-2"></i></button>
</div>
</div>
</form>
</div>
</div>
Add purchase component
import { Component, OnInit, Inject } from '#angular/core';
import { MAT_DIALOG_DATA } from '#angular/material';
import { NgForm } from '#angular/forms';
#Component({
selector: 'app-add-purchase',
templateUrl: './add-purchase.component.html',
styleUrls: ['./add-purchase.component.css']
})
export class AddPurchaseComponent implements OnInit {
purchaseDetails : any = [{
product_id : '',
rate : '',
price : '',
quantity : ''
}];
vendorData : any;
productData : any;
constructor(#Inject(MAT_DIALOG_DATA) private addPurchaseData : any) { }
ngOnInit() {
console.log(this.addPurchaseData);
console.log(this.purchaseDetails);
this.vendorData = this.addPurchaseData.vendors;
this.productData = this.addPurchaseData.products;
}
addNewPurchaseDetail(){
console.log(this.purchaseDetails);
this.purchaseDetails.push({
product_id: '',
rate: '',
price: '',
quantity: ''
});
}
removePurchaseDetail(index){
this.purchaseDetails.splice(index, 1);
}
}
while adding new purchase details row
i'am able to get the row but my values are resetting
i don't know what i am doing wrong
Is there any right way to achieve this
I am new to angular pls guide me through this
when i console logged the model values it was there but i don't know why the rows has been resetted

Found the issue:
Input name should be like this:
<input name="reciept_no[{{i}}]" [(ngModel)]="purchaseDetails.reciept_no" #reciept_no="ngModel" type="text" required class="form-control">
I had like this :
<input name="reciept_no" [(ngModel)]="purchaseDetails.reciept_no" #reciept_no="ngModel" type="text" required class="form-control">

group radio inputs validation

I got little problem with append error state. I got 7 radio inputs and after submit I got 7 error states under group.
Could some one help me figure out how to modify the code.
<form class="register-form">
<div class="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 margin-top-20">
<h4 class="text-center"> TEST TEST</h4>
<div class="question-box">
<p class="margin-top-20"><span class="red">*</span>1. QUESTION.</p>
<div class="col-lg-6 col-lg-offset-3 form-group text-center question">
<div class="radio-item" >
<input type="radio" id="case1" name="case" value="0-50" required data-step2="1">
<label for="case1">0 - 50</label>
</div>
<div class="radio-item">
<input type="radio" id="case2" name="case" value="50-100" required data-step2="1">
<label for="case2">50 - 100</label>
</div>
<div class="radio-item">
<input type="radio" id="case3" name="case" value="100+" required data-step2="1">
<label for="case3">Over 100</label>
</div>
</div>
</div>
<div class="question-box">
<p class="margin-top-20"><span class="red">*</span>2. QUESTION</p>
<div class="col-lg-6 col-lg-offset-3 form-group text-center question">
<div class="radio-item">
<input type="radio" id="resell1" name="resell" value="1" required data-step2="1">
<label for="resell1">YES</label>
</div>
<div class="radio-item">
<input type="radio" id="resell2" name="resell" value="0" required data-step2="1">
<label for="resell2">NO</label>
</div>
</div>
</div>
<div class="question-box">
<p class="margin-top-20"><span class="red">*</span>3.QUESTION</p>
<div class="col-lg-6 col-lg-offset-3 form-group text-center question">
<div class="radio-item">
<input type="radio" id="export1" name="export" value="1" required data-step2="1">
<label for="export1">YES</label>
</div>
<div class="radio-item">
<input type="radio" id="export2" name="export" value="0" required data-step2="1">
<label for="export2">NO</label>
</div>
</div>
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 margin-top-20 text-center">
<button id="submit-registration" type="submit" class="btn btn-success radius send" >Continue</button>
</div>
</form>
https://jsfiddle.net/13j34o0g/1
thx

I've changed a few things in your code and i think this might be what you are looking for.
Example here
The first code below will loop through you input's why the name attribute. that means it will only run it 3 times
$(".invalid-info").remove(); // Removes the error messages before we run the validation.
var group = {};
$('input[name^="case"], input[name^="resell"], input[name^="export"]').each(function(index) {
var $this = $(this);
var name = this.name;
if (!group[name]) {
group[name] = true;
if (!testRadio($this, options.showValidOnCheck)) validated = false;
}
});
And i changed.
var value = $form.find('input[name="' + name + '"]').is(":checked");
if (!value) {
$('<p class="invalid-info" style="color: red">Please choose corect answer</p>').appendTo($($input).parent().parent())
return false;
}
Let me know if this is what you were looking for.