Моя проблема заключается в следующем: код хорошо работает с жестко закодированными значениями, подобными этому, он инициирует обработку платежей
options: PaystackOptions = {
amount:4500,
email:'name@email.com',
ref: `ref-${Math.ceil(Math.random() * 10e13)}`
};
при вызове из. html сторона с такой кнопкой
<button class="btn btn-outline-dark" [disabled]="donateForm.invalid"
angular4-paystack
[PaystackOptions]="options"
(paymentInit)="paymentCancel()"
(close)="paymentCancel()"
(callback)="paymentDone($event)">
Donate</button>
, затем я пытаюсь назначить здесь значения формы из метода onSubmit () , когда консоль входит в журнал, я вижу значения формы, но не присваиваю им
onSubmit() {
console.log(this.donateForm.value);
this.isSubmitted = true;
this.options = {
amount: this.donateForm.value['amount'],
email: this.donateForm.value['email'],
ref: `ref-${Math.ceil(Math.random() * 10e13)}`
}
console.log(this.options.amount, this.options.email);
if (this.donateForm.invalid) {
return;
}
it говорит, что электронная почта пуста, следовательно, он не может инициировать платеж, пытаюсь набрать angular, так что я здесь новенький. Любая помощь?
вопрос в том, как мне заменить жестко закодированные значения на значения, введенные пользователем из моей формы.
мой файл .ts выглядит так
import { Component, OnInit } from '@angular/core';
import { NgbModalConfig, NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { Router } from '@angular/router';
import { PaystackOptions } from 'angular4-paystack';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css'],
providers: [NgbModalConfig, NgbModal]
})
export class HomeComponent implements OnInit {
donateForm: FormGroup;
isSubmitted = false;
options: PaystackOptions = {
amount:4500,
email:'name@email.com',
ref: `ref-${Math.ceil(Math.random() * 10e13)}`
};
reference = '';
title: any;
constructor(
private fb: FormBuilder,
config: NgbModalConfig,
private authService: AuthService,
private modalService: NgbModal,
) {
// customize default values of modals used by this component tree
config.backdrop = 'static';
config.keyboard = false;
}
ngOnInit(): void {
this.donateForm = this.fb.group({
fullname: ['', [Validators.required, Validators.minLength(2)]],
email: ['', [Validators.required, Validators.email]],
amount: ['', Validators.required]
});
}
paymentInit() {
console.log('Payment initialized');
}
paymentDone(ref: any) {
this.title = 'Payment successfull';
console.log(this.title, ref);
}
paymentCancel() {
console.log('payment failed');
}
open(content) {
this.modalService.open(content);
}
modal(donate) {
this.modalService.open(donate);
}
//check: number
get formControls() { return this.donateForm.controls; }
onSubmit() {
console.log(this.donateForm.value);
this.isSubmitted = true;
this.options = {
amount: this.donateForm.value['amount'],
email: this.donateForm.value['email'],
ref: `ref-${Math.ceil(Math.random() * 10e13)}`
}
console.log(this.options.amount, this.options.email);
if (this.donateForm.invalid) {
return;
}
}
}
мой. html файл
<!-- Modal for Donation Start-->
<ng-template #donate let-c="close" let-d="dismiss">
<div class="modal-header">
<h3 class="text-center p-4">Campaign Funds</h3>
<button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form [formGroup]="donateForm" (ngSubmit)="onSubmit()" class="container">
<div class="form-group">
<p [ngClass]="{ 'has-error': isSubmitted && formControls.fullname.errors }">
<input type="text" class="form-control form-control-lg" formControlName="fullname"
placeholder="Enter Fullname">
</p>
<div *ngIf="isSubmitted && formControls.fullname.errors" class="help-block">
<div *ngIf="formControls.fullname.errors.required">Fullname is required</div>
</div>
</div>
<div class="form-group">
<p for="email" [ngClass]="{ 'has-error': isSubmitted && formControls.email.errors }">
<input type="email" class="form-control form-control-lg" formControlName="email"
placeholder="Enter valid email">
</p>
<div *ngIf="isSubmitted && formControls.email.errors" class="help-block">
<div *ngIf="formControls.email.errors.required">Email is required</div>
</div>
</div>
<div class="form-group">
<p for="amount" [ngClass]="{ 'has-error': isSubmitted && formControls.amount.errors }">
<input type="text" class="form-control form-control-lg" formControlName="amount"
placeholder="Enter Amount">
</p>
<div *ngIf="isSubmitted && formControls.amount.errors" class="help-block">
<div *ngIf="formControls.amount.errors.required">Amount is required</div>
</div>
</div>
<div class="text-center">
<button class="btn btn-outline-dark" [disabled]="donateForm.invalid" angular4-paystack
[PaystackOptions]="options" (paymentInit)="paymentCancel()" (close)="paymentCancel()"
(callback)="paymentDone($event)">Donate</button>
</div>
</form>
</div>
<div class="modal-footer d-flex justify-content-center">
<small style="text-align: center;">Thank you for your donation</small>
</div>
</ng-template>
<!-- Modal for Donation End-->