Существует динамическое добавление полей ввода, и для каждого поля формы есть кнопка удаления, я добился этого с помощью Angular 6, так как я новичок в Angular 6, пожалуйста, помогите мне завершить его.То, что я пробовал, я создал набор полей (3 поля выбора и 1 текстовое поле), нажмите на поле ввода или кнопку добавления, затем откроется модель "dest_address", попросите пин-код, место, улицу дороги.Эти данные должны храниться, когда мы нажимаем на эту модель.Что я говорю, что пользователь ввел три пункта назначения, тогда, если пользователь щелкает по второму индексу модели, он показывает только детали этого и формирует массив этого (несколько адресов назначения).
Я попробовал это (html)
<div class="form-group col-r-half">
<div formArrayName="itemRows">
<div *ngFor="let itemrow of itemRows.controls; let i=index" [formGroupName]="i">
<div class="input-group">
<input type="text" class="form-control" id="dest_address" formControlName="dest_address_line_1" (onAddressChange)="handleAddressChange1($event)"
[ngClass]="{ 'is-invalid': submitted1 && p.dest_address_line_1.errors}" (click)="openDest(dest_address)" />
<div class="input-group-append">
<button class="btn map-mark" (click)="openDest(dest_address)" type="button"><i class="fa fa-map-marker"></i></button>
</div>
</div>
<div class="err-msg">
<div *ngIf="submitted1 && p.dest_address_line_1.errors">
<div *ngIf="p.dest_address_line_1.errors.required">Delivery Address is Required</div>
<div *ngIf="p.dest_address_line_1.errors.pattern">Only Letter is Allowed</div>
</div>
</div>
<label for="dest_address">Delivery Address {{ i + 1 }}<sup class="sup-e">*</sup></label>
<button class="btn add-on" type="button" (click)="addNewRow()"><i class="fa fa-plus"></i></button>
<button *ngIf="i >= 1" (click)="deleteRow(i)" class="btn btn-danger add-on"><i
class="fa fa-minus"></i></button>
</div> </div>
</div>
<ng-template #dest_address let-modal>
<div class="modal-header add-modal-header">
<h4 class="modal-title" id="modal-basic-title">Enter detailed address to get lowest rates</h4>
<span><i class="fa fa-map-marker"></i></span>
</div>
<div class="modal-body add-b-modal">
<div class="card">
<form class="form-body m-t-10" [formGroup]="deliveryAddressDetailForm" id="deliveryaddressdetailForm" method="POST"
(ngSubmit)="ondeliveryaddressSubmit()">
<div class="row">
<div class="form-group col-l-half">
<input type="text" class="form-control" id="delivery_pin" formControlName="delivery_address_pin" [ngClass]="{ 'is-invalid': delivery_address_submitted && d.delivery_address_pin.errors}"/>
<label for="">PIN</label>
<div class="err-msg">
<div *ngIf="delivery_address_submitted && d.delivery_address_pin.errors">
<div *ngIf="d.delivery_address_pin.errors.required"> PIN is Required</div>
</div>
</div>
</div>
<div class="form-group col-r-half">
<input ngx-google-places-autocomplete (onAddressChange)="handleAddressChange1($event)" id="delivery_location" class="form-control" formControlName="delivery_address_location" [ngClass]="{ 'is-invalid': delivery_address_submitted && d.delivery_address_location.errors}">
<label for="">Location</label>
<div class="err-msg">
<div *ngIf="delivery_address_submitted && d.delivery_address_location.errors">
<div *ngIf="d.delivery_address_location.errors.required">Location is Required</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-sm-12">
<input type="text" class="form-control" id="delivery_house_flat" formControlName="delivery_address_house_flat" [ngClass]="{ 'is-invalid': delivery_address_submitted && d.delivery_address_house_flat.errors}"/>
<label for="">House/Flat/Shop No.</label>
<div class="err-msg">
<div *ngIf="delivery_address_submitted && d.delivery_address_house_flat.errors">
<div *ngIf="d.delivery_address_house_flat.errors.required">House/Flat/Shop No. is Required</div>
<!-- <div *ngIf="d.delivery_address_house_flat.errors.pattern">Only Letter is Allowed</div> -->
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-sm-12">
<input type="text" class="form-control" id="delivery_complex_society" formControlName="delivery_address_complex_society" [ngClass]="{ 'is-invalid': delivery_address_submitted && d.delivery_address_complex_society.errors}"/>
<label for="">Complex/Society/Market</label>
<div class="err-msg">
<div *ngIf="delivery_address_submitted && d.delivery_address_complex_society.errors">
<div *ngIf="d.delivery_address_complex_society.errors.required">Complex/Society/Market is Required</div>
<!-- <div *ngIf="d.delivery_address_complex_society.errors.pattern">Only Letter is Allowed</div> -->
</div>
</div>
</div>
</div>
<!-- <div class="row">
<div class="form-group">
<input type="text" class="form-control" id=""/>
<label for="">Locality</label>
</div>
</div> -->
<div class="row">
<div class="form-group col-sm-12">
<input type="text" class="form-control" id="delivery_road" formControlName="delivery_address_road" />
<label for="">Road</label>
</div>
</div>
<div class="col-sm-12 text-center p-0">
<button>Submit</button>
</div>
</form>
</div>
</div>
<!-- <div class="modal-footer">
<button type="button" class="btn btn-outline-dark" (click)="modal.close()">Save</button>
</div> -->
</ng-template>
Это ts файл угловой
openDest(dest_address) {
this.modalRefDestination = this.modalService.open(dest_address, {ariaLabelledBy: 'modal-basic-title'})
}
this.deliveryAddressDetailForm = this._fb.group({
delivery_address_pin: [''],
delivery_address_location: [''],
delivery_address_house_flat: [''],
delivery_address_complex_society: [''],
delivery_address_road: [''],
});
get itemRows(): FormArray {
return this.enterdetailForm.get('itemRows') as FormArray;
}
addNewRow() {
// control refers to your formarray
const control = <FormArray>this.enterdetailForm.controls['itemRows'];
control.push(this.initItemRows()); // add new formgroup
}
initItemRows() {
return this._fb.group({
// list all your form controls here, which belongs to your form array
dest_address_line_1: [''],
// intermediate_location : [''],
intermediate_lat: [''],
intermediate_long: [''],
});
}
createForm() {
this.enterdetailForm = this._fb.group({
itemRows: this._fb.array([])
});
this.enterdetailForm.setControl('itemRows', this._fb.array([]));
}
deleteRow(index: number) {
// control refers to your formarray
const control = <FormArray>this.enterdetailForm.controls['itemRows'];
control.removeAt(index); // remove the chosen row
this.intermediate_address.splice(index, 1);
}
openVerticallyCentered(content) {
this.modalService.open(content, { centered: true });
}
public handleAddressChange1(address1: Address) {
this.enterdetailForm.value.dest_address_line_1 = address1.formatted_address
this.destination_address = address1.formatted_address;
// console.log(address1.formatted_address);
this.destination_lat = address1.geometry.location.lng();
this.destination_lng = address1.geometry.location.lat();
// console.log('destination' + this.destination_lat);
// console.log('destination' + this.destination_lng);
this.bookride.destination_lat = this.destination_lat;
this.bookride.destination_lng = this.destination_lng;
// console.log(this.bookride);
localStorage.setItem('constantVariable.bookRide', JSON.stringify(this.bookride));
// localStorage.setItem('constantVariable.bookingConfirmDestintionLat', JSON.stringify(this.destination_lat));
// localStorage.setItem('constantVariable.bookingConfirmDestinationlng', JSON.stringify(this.destination_lng));
let x = {
intermediate_location: this.destination_address,
intermediate_lat: this.destination_lat,
intermediate_lng: this.destination_lng
}
// console.log('x here',x);
this.intermediate_address.push(x);
console.log('intermediate address', this.intermediate_address);
// console.log('json parse intermediate address',JSON.stringify(this.intermediate_address));
}
ondeliveryaddressSubmit(){
console.log('delivery address form details',this.deliveryAddressDetailForm.value);
console.log('destination address',this.destination_address);
this.deliveryAddressDetailForm.value.delivery_address_location = this.destination_address;
this.enterdetailForm.value.dest_address_line_1 = this.deliveryAddressDetailForm.value.delivery_address_location = this.destination_address;
this.enterdetailForm.patchValue({dest_address_line_1:this.deliveryAddressDetailForm.value.delivery_address_location});
this.deliveryAddressDetailForm.patchValue({delivery_address_location:this.deliveryAddressDetailForm.value.delivery_address_location});
this.modalRefDestination.dismiss();
}
Он показывает данные для ts, но когда я нажимаю пункт назначенияполе ввода, оно показывает пустое, как мы показываем это в модели, если я щелкнул по адресу назначения второго (предположим, что существует три адреса назначения).Показаны все детали по трем адресам назначения.когда мы нажимаем. Кроме того, я также хочу данные о местоположении на адрес доставки.
Ссылка на изображение
[https://imgur.com/rooHjt6]
[https://imgur.com/ulz30Ga]