Here is the form I have created:
<div class="container">
<form formGroupName="checkoutForm">
<section>
<div class="row">
<div class="col col-12 col-lg-8">
<div class="row mb-4">
<div formGroupName="deliveryAddress">
<div class="col">
<label class="form-label">First Name</label>
<input id="firstName" class="form-control fw-bold" type="text" required
formControlName="firstName" (change)="saveToDataStore()">
</div>
<div class="col">
<label class="form-label">Last Name</label>
<input id="lastName" class="form-control fw-bold" type="text" required
formControlName="lastName" (change)="saveToDataStore()">
</div>
</div>
</div>
</div>
</div>
</section>
</form>
</div>
This is how the form is declared in the component:
export class Checkout2Component {
checkoutForm: FormGroup;
public cart;
ngOnInit() {
this.checkoutForm = new FormGroup({
deliveryAddress: new FormGroup({
firstName: new FormControl(''),
lastName: new FormControl(''),
phone: new FormControl(''),
address1: new FormControl(''),
address2: new FormControl(''),
useAsBillingAddress: new FormControl(''),
}),
applianceDelivery: new FormGroup({
deliveryDate: new FormControl(''),
specialInstructions: new FormControl(''),
}),
paymentMethod: new FormGroup({
// paymentType: 'new FormControl(Credit Card'),
cardNumber: new FormControl(''),
expMonth: new FormControl(''),
expYear: new FormControl(''),
CVV: new FormControl(''),
defaultCreditCard: new FormControl(''),
})
});
console.log('this.checkoutForm', this.checkoutForm.value);
// this.initCheckoutForm();
}
An error occurs during application run with the following message:
ERROR TypeError: this.formDirective is null ngOnInit http://localhost:4200/main-A4KJZJDC.js:14 U0 http://localhost:4200/main-A4KJZJDC.js:10 mN http://localhost:4200/main-A4KJZJDC.js:10 mw http://localhost:4200/main-A4KJZJDC.js:10 bc http://localhost:4200/main-A4KJZJDC.js:10 CR http://localhost:4200/main-A4KJZJDC.js:10 Gh http://localhost:4200/main-A4KJZJDC.js:10 w_ http://localhost:4200/main-A4KJZJDC.js:10 ER http://localhost:4200/main-A4KJZJDC.js:10 __ http://localhost:4200/main-A4KJZJDC.js:10 CR http://localhost:4200/main-A4KJZJDC.js:10 Gh http://localhost:4200/main-A4KJZJDC.js:10 w_ http://localhost:4200/main-A4KJZJDC.js:10 D_ http://localhost:4200/main-A4KJZJDC.js:10 CR http://localhost:4200/main-A4KJZJDC.js:10 Gh http://localhost:4200/main-A4KJZJDC.js:10 w_ http://localhost:4200/main-A4KJZJDC.js:10 ER http://localhost:4200/main-A4KJZJDC.js:10 __ http://localhost:4200/main-A4KJZJDC.js:10 CR http://localhost:4200/main-A4KJZJDC.js:10 Gh http://localhost:4200/main-A4KJZJDC.js:10 bR http://localhost:4200/main-A4KJZJDC.js:10 v_ http://localhost:4200/main-A4KJZJDC.js:10 _P http://localhost:4200/main-A4KJZJDC.js:10 detectChangesInAttachedViews http://localhost:4200/main-A4KJZJDC.js:10