我已将paypal集成到我的角度应用程序中。但是，我在努力在开始支付宝流程之前弄清楚如何验证表单元素，因此我可以显示一条错误消息。例如，在允许他们继续之前，我需要具有一个有效的电子邮件地址。
我刚开始进行角度开发，并且可以通过bluepnume注释here在html页面中使其正常工作，但是想知道是否在Angular中有这样做的例子吗？
ngOnInit() {
paypal.Button.render({
env: 'sandbox',
locale: 'en_US',
style: {
label: 'pay',
fundingicons: 'true',
branding: 'true',
size: 'responsive',
shape: 'rect',
color: 'gold'
},
client: {
sandbox: environment.PaypalSandBoxClientKey,
},
commit: true,
payment: (data, actions) => {
return actions.payment.create({
...
});
},
onAuthorize: (data, actions) => {
return actions.payment.execute().then((payment) => {
this.createReservation(...);
});
},
// onInit is called when the button first renders
onInit: (data, actions) => {
// Disable the buttons
actions.disable();
document.querySelector('#email')
.addEventListener('change', function (event) {
this.isValid() ? actions.enable() : actions.disable();
});
},
onClick: () => {
this.toggleValidationMessage();
},
}, '#paypal-checkout-btn');
}
isValid(): boolean {
let valid = false;
const email = document.querySelector("#email").value;
if (!this.validEmail(email)) {
document.querySelector("#error").innerHTML = "Please enter a valid e-mail";
return false;
}
return true;
}
validEmail(email): boolean {
...
}
toggleValidationMessage(): void {
document.querySelector('#error').style.display = (this.isValid() ? 'none' : 'block');
}
createReservation(...): void {
上面的角度组件中出现了几个问题，我显然是用错误的方式来做。