I'm currently working on an Angular 8 Application and implementing reactive forms. I don't know where I'm going wrong, and every time I run the project I get the following errors.
*ERROR Error: formGroup expects a FormGroup instance. Please pass one in. Example:
<div [formGroup]="myGroup">
<input formControlName="firstName">
</div>
In your class:
this.myGroup = new FormGroup({
firstName: new FormControl()
});
at Function.missingFormException*
I have also attached a picture of the errors.
MY HTML CODE
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-8 mr-auto ml-auto">
<div class="panel panel-default">
<form [formGroup]="customStripeForm" (ngSubmit)="pay(customStripeForm.value)">
<div class="panel-body mt-5">
<h4>Stripe - Custom form demo</h4>
<p><b>{{ message }}</b></p>
<div class="row">
<div class="col-xs-12 col-md-12">
<div class="form-group">
<label>CARD NUMBER</label>
<div class="input-group">
<input type="text" formControlName="cardNumber" class="form-control" placeholder="Valid Card Number" name="cardNumber" maxlength="18" />
<span class="input-group-addon">
<span class="fa fa-credit-card"></span>
</span>
</div>
<div *ngIf="submitted && customStripeForm.controls.cardNumber.errors" class="text-danger">
<div *ngIf="customStripeForm.controls.cardNumber.errors.required">Card number is required</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-7 col-md-7">
<div class="form-group">
<label><span class="hidden-xs">EXPIRATION</span> Date</label>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<select formControlName="expMonth" class="form-control">
<option value="">Select Month</option>
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</div>
</div>
<div class="col-md-6 pull-right">
<div class="form-group">
<select formControlName="expYear" class="form-control">
<option value="">Select Year</option>
<option value="20">2020</option>
<option value="21">2021</option>
<option value="22">2022</option>
<option value="23">2023</option>
<option value="24">2024</option>
<option value="25">2025</option>
<option value="26">2026</option>
<option value="27">2027</option>
<option value="28">2028</option>
<option value="29">2029</option>
<option value="30">2030</option>
</select>
</div>
</div>
</div>
<div *ngIf="submitted && customStripeForm.controls.expMonth.errors" class="text-danger">
<div *ngIf="customStripeForm.controls.expMonth.errors.required">Expiration month is required</div>
</div>
<div *ngIf="submitted && customStripeForm.controls.expYear.errors" class="text-danger">
<div *ngIf="customStripeForm.controls.expYear.errors.required">Expiration year is required</div>
</div>
</div>
</div>
<div class="col-xs-5 col-md-5 pull-right">
<div class="form-group">
<label>CV CODE</label>
<input type="text" formControlName="cvv" class="form-control" placeholder="CVC" maxlength="4" />
</div>
<div *ngIf="submitted && customStripeForm.controls.cvv.errors" class="text-danger">
<div *ngIf="customStripeForm.controls.cvv.errors.required">CVV is required</div>
<div *ngIf="customStripeForm.controls.cvv.errors.minlength">CVV must be at least 3 characters</div>
</div>
</div>
</div>
</div>
<div class="panel-footer">
<div class="row">
<div class="col-xs-12 col-md-12">
<button class="btn btn-warning btn-lg btn-block" *ngIf="!formProcess">Process payment</button>
<span class="btn btn-warning btn-lg btn-block" *ngIf="formProcess">Processing please wait...</span>
</div>
</div>
</div>
</form>
<p class="mt-2">Try it out using the test card number 4242 4242 4242 4242, a random three-digit CVC number and any expiration date in the future.</p>
</div>
</div>
</div>
</div>
My TS File
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './appponent.html',
styleUrls: ['./appponent.css']
})
export class AppComponent implements OnInit {
submitted: boolean;
formProcess: boolean;
message: string;
public customStripeForm: FormGroup;
ngOnInit(): void {
this.loadStripe();
}
loadStripe() {
if(!window.document.getElementById('stripe-custom-form-script')) {
var s = window.document.createElement('script');
s.id = 'stripe-custom-form-script';
s.type = 'text/javascript';
s.src = '/';
s.onload = () => {
window['Stripe'].setPublishableKey('pk_test_aeUUjYYcx4XNfKVW60pmHTtI');
};
window.document.body.appendChild(s);
}
}
pay(form) {
if(!window['Stripe']) {
alert('Oops! Stripe did not initialize properly.');
return;
}
this.submitted = true;
console.log(this.customStripeForm);
if (this.customStripeForm.invalid) {
return;
}
this.formProcess = true;
console.log("form");
console.log(form);
if(!window['Stripe']) {
alert('Oops! Stripe did not initialize properly.');
return;
}
(<any>window).Stripe.card.createToken({
number: form.cardNumber,
exp_month: form.expMonth,
exp_year: form.expYear,
cvc: form.cvc
}, (status: number, response: any) => {
this.submitted = false;
this.formProcess = false;
if (status === 200) {
this.message = `Success! Card token ${response.card.id}.`;
} else {
this.message = response.error.message;
}
});
}
};
I'm currently working on an Angular 8 Application and implementing reactive forms. I don't know where I'm going wrong, and every time I run the project I get the following errors.
*ERROR Error: formGroup expects a FormGroup instance. Please pass one in. Example:
<div [formGroup]="myGroup">
<input formControlName="firstName">
</div>
In your class:
this.myGroup = new FormGroup({
firstName: new FormControl()
});
at Function.missingFormException*
I have also attached a picture of the errors.
MY HTML CODE
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-8 mr-auto ml-auto">
<div class="panel panel-default">
<form [formGroup]="customStripeForm" (ngSubmit)="pay(customStripeForm.value)">
<div class="panel-body mt-5">
<h4>Stripe - Custom form demo</h4>
<p><b>{{ message }}</b></p>
<div class="row">
<div class="col-xs-12 col-md-12">
<div class="form-group">
<label>CARD NUMBER</label>
<div class="input-group">
<input type="text" formControlName="cardNumber" class="form-control" placeholder="Valid Card Number" name="cardNumber" maxlength="18" />
<span class="input-group-addon">
<span class="fa fa-credit-card"></span>
</span>
</div>
<div *ngIf="submitted && customStripeForm.controls.cardNumber.errors" class="text-danger">
<div *ngIf="customStripeForm.controls.cardNumber.errors.required">Card number is required</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-7 col-md-7">
<div class="form-group">
<label><span class="hidden-xs">EXPIRATION</span> Date</label>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<select formControlName="expMonth" class="form-control">
<option value="">Select Month</option>
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
<option value="4">04</option>
<option value="5">05</option>
<option value="6">06</option>
<option value="7">07</option>
<option value="8">08</option>
<option value="9">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</div>
</div>
<div class="col-md-6 pull-right">
<div class="form-group">
<select formControlName="expYear" class="form-control">
<option value="">Select Year</option>
<option value="20">2020</option>
<option value="21">2021</option>
<option value="22">2022</option>
<option value="23">2023</option>
<option value="24">2024</option>
<option value="25">2025</option>
<option value="26">2026</option>
<option value="27">2027</option>
<option value="28">2028</option>
<option value="29">2029</option>
<option value="30">2030</option>
</select>
</div>
</div>
</div>
<div *ngIf="submitted && customStripeForm.controls.expMonth.errors" class="text-danger">
<div *ngIf="customStripeForm.controls.expMonth.errors.required">Expiration month is required</div>
</div>
<div *ngIf="submitted && customStripeForm.controls.expYear.errors" class="text-danger">
<div *ngIf="customStripeForm.controls.expYear.errors.required">Expiration year is required</div>
</div>
</div>
</div>
<div class="col-xs-5 col-md-5 pull-right">
<div class="form-group">
<label>CV CODE</label>
<input type="text" formControlName="cvv" class="form-control" placeholder="CVC" maxlength="4" />
</div>
<div *ngIf="submitted && customStripeForm.controls.cvv.errors" class="text-danger">
<div *ngIf="customStripeForm.controls.cvv.errors.required">CVV is required</div>
<div *ngIf="customStripeForm.controls.cvv.errors.minlength">CVV must be at least 3 characters</div>
</div>
</div>
</div>
</div>
<div class="panel-footer">
<div class="row">
<div class="col-xs-12 col-md-12">
<button class="btn btn-warning btn-lg btn-block" *ngIf="!formProcess">Process payment</button>
<span class="btn btn-warning btn-lg btn-block" *ngIf="formProcess">Processing please wait...</span>
</div>
</div>
</div>
</form>
<p class="mt-2">Try it out using the test card number 4242 4242 4242 4242, a random three-digit CVC number and any expiration date in the future.</p>
</div>
</div>
</div>
</div>
My TS File
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.ponent.html',
styleUrls: ['./app.ponent.css']
})
export class AppComponent implements OnInit {
submitted: boolean;
formProcess: boolean;
message: string;
public customStripeForm: FormGroup;
ngOnInit(): void {
this.loadStripe();
}
loadStripe() {
if(!window.document.getElementById('stripe-custom-form-script')) {
var s = window.document.createElement('script');
s.id = 'stripe-custom-form-script';
s.type = 'text/javascript';
s.src = 'https://js.stripe./v2/';
s.onload = () => {
window['Stripe'].setPublishableKey('pk_test_aeUUjYYcx4XNfKVW60pmHTtI');
};
window.document.body.appendChild(s);
}
}
pay(form) {
if(!window['Stripe']) {
alert('Oops! Stripe did not initialize properly.');
return;
}
this.submitted = true;
console.log(this.customStripeForm);
if (this.customStripeForm.invalid) {
return;
}
this.formProcess = true;
console.log("form");
console.log(form);
if(!window['Stripe']) {
alert('Oops! Stripe did not initialize properly.');
return;
}
(<any>window).Stripe.card.createToken({
number: form.cardNumber,
exp_month: form.expMonth,
exp_year: form.expYear,
cvc: form.cvc
}, (status: number, response: any) => {
this.submitted = false;
this.formProcess = false;
if (status === 200) {
this.message = `Success! Card token ${response.card.id}.`;
} else {
this.message = response.error.message;
}
});
}
};
- 1 Please post text, not images of text. – Dave Newton Commented Sep 22, 2020 at 15:11
- I've updated my Question. Yu can check it now – Mashhood Commented Sep 22, 2020 at 15:17
-
Where do you initialize your
FormGroup? It kind of says that in the error message. – Dave Newton Commented Sep 22, 2020 at 15:20
3 Answers
Reset to default 4I have seen you have not initialized the customStripeForm value.
You need to initialize that value on ngOnInit function like this.
this.customStripeForm = this._formBuilder.group({
name: [ "", Validators.required ],
...
});
Here, this._formBuilder is the instance of FormBuilder defined on constructor as follows.
constructor(
private _formBuilder: FormBuilder) {
}
And you need to import FormsModule and ReactiveFormsModule on the module which declares that ponent. On your case, AppModule I think.
i solved the problem by initializing the form in the constructor of the ponent somewhat like this
constructor(
this.mycustomForm = this._formBuilder.group({
//for stuff goes here
...
}));
I got this error just on invalid name of method in (change) - after fix the name the error was gone.