Reports

The error you're facing is likely due to the conflict between [(ngModel)] and formControlName in Angular Reactive Forms. You shouldn't use both in the same form element. To resolve this issue, you can either use template-driven forms (with [(ngModel)]) or reactive forms (with formControlName), but not both at the same time.

Here’s how to fix it:

If you are using Reactive Forms: Remove the [(ngModel)] binding and use only formControlName:

<div class="col-lg-4 col-md-4 col-sm-4">
    <div class="form__group">
        <input type="text" class="form__field" placeholder=" " formControlName="Bank" id="fname">
        <label for="fname" class="form__label">Bank</label>
    </div>                
</div>

Ensure that you have added FormBuilder or FormGroup to your component as needed:

this.paymentForm = this.formBuilder.group({
  Bank: ['']
});

If you are using Template-Driven Forms: Remove formControlName and use only [(ngModel)]: html

Bank

Also, ensure you have imported the necessary modules in your module file: typescript import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({ imports: [ CommonModule, FormsModule, ReactiveFormsModule ] })


Summary:
- For reactive forms, use `formControlName` only.
- For template-driven forms, use `[(ngModel)]` only.

Make sure you're consistent with your form approach across the app. Let me know if this resolves your issue!

79100813