У меня есть кнопка, которая открывает модальную форму, что тег <input> в этой форме был установлен как readonly, а значение по умолчанию values="{{data.sample}} заполнено данными, которые я извлек через вызов API. Я только хотел, чтобы пользователь открыл модальное окно и увидел детали записи, после чего он может нажать кнопку «Отправить», чтобы отправить данные, заполненные по умолчанию. Я могу видеть эти {{data.sample}} в своем поле ввода, и пользователь не сможет редактировать перед отправкой.
Однако, когда я нажимал кнопку отправки, я не передавал эти значения вместе с формой,Мои значения формы пусты и проверили на моей консоли, что все значения формы пусты. Я попытался создать пример ввода, чтобы я мог что-то ввести, чтобы увидеть, работает ли вообще моя форма. Мне удалось захватить эти значения, введенные вручную, но не эти предварительно заполненные {{data.sample}} значения.
Я не понимаю, почему.
Это мой модальный режим в моем component.html:
<ng-template #content let-modal>
<div class="modal-header">
<h5 class="modal-title">Transfer to bank for processing?</h5>
</div>
<div class="modal-body">
<div class="container d-flex flex-column">
<div class="row flex no-gutters">
<div class="col-12 mh-100">
<form [formGroup]="accountPayableProcessForm" (ngSubmit)="onProcess()">
<div class="form-group row">
<div class="col-sm-6">
<label class="my-label" for="owningAccount">Owning Account</label>
<input type="text" formControlName="owningAccount" class="form-control"
value="{{data.owningAccount}}" />
</div>
<div class="col-sm-6" style="padding-left: 10px;">
<label class="my-label" for="accountPayableID">Account Payable ID</label>
<input type="text" formControlName="accountPayableID" class="form-control"
value="{{data.accountPayableID}}" readonly />
</div>
</div>
...
...
...
<div class="form-group modal-footer">
<div class="override-alert">
<alert></alert>
</div>
<button [disabled]="loading" class="btn btn-primary">Process</button>
</div>
</form>
</div>
</div>
</div>
</div>
</ng-template>
Это мой onProcess() и мой formBuilder в моем component.ts:
ngOnInit(): void {
this.accountPayableProcessForm = this.formBuilder.group({
owningAccount: [''],
accountPayableID: [''],
buyerAccount: [''],
buyerCode: [''],
...
});
}
onProcess() {
this.submitted = true;
this.loading = true;
console.log(this.accountPayableProcessForm.value);
this.accountPayableService
.processAccountPayable(this.accountPayableProcessForm.value)
.pipe(first())
.subscribe(
data => {
this.loading = false;
this.submitted = false;
window.location.reload();
this.alertService.success(
'Success! Account payable has been transferred to bank for processing',
true
);
},
error => {
this.alertService.error('Submission failed, please try again');
this.loading = false;
}
);
}
Я проверил свою консоль на console.log(this.accountPayableProcessForm.value);, все значения пустыowningAccount: "".
Это как-то связано с readonly или это что-то еще?