I'am working on angular project and this what is appearing to me :this.form.get is not a function I'll show you my component :`export class CheckoutComponent implements OnInit { checkoutFormGroup:FormGroup;

totalPrice:number=0;

totalQuantity:number=0;`

// }

now my html component:<div > <h3> Review your order</h3> <p> total quantity:{{totalQuantity}}</p> <p>shipping free</p> <p>total Price: {{totalPrice}}</p> </div>

and this is the result in the navigator : enter image description here and when I open console : enter image description here

CodePudding user response：

https://github.com/angular/angular/issues/11171#issuecomment-243583467

You don't need to add REACTIVE_FORM_DIRECTIVES or FormProviders to your module >definition. These are included when you import the ReactiveFormsModule.

You are importing a few symbols from @angular/common. That's where the old API >lives, and it's not compatible with the new API. If you change the FormBuilder >import in your form component file to point to the new API in @angular/forms, the >form loads as expected.

CodePudding user response：

A problem could be that this.form is not defined. Since you're declaring it as FormGroup the function get is known by the inheritance of FormGroup but that's it. You need to have an instance of FormGroup accessible at your class.

How do you introduce the form your working with to the class?

As far as I can see you're only declaring it via: checkoutFormGroup:FormGroup;. But you're not defining it by creating it via 'new' or injecting it to your class CheckoutComponent.