CODEWITHSUNDEEP
typescriptangular6
Piotr P
Piotr P

Reputation: 41

FormGroup expects a FormGroup instance error

After reading all similar topics, any solution didn't help me to solve this problem:

in html:

<form [formGroup]="project-name-form" (ngSubmit)="onImportClick()">
    <div class="form-group">
        <input type="text" formControlName="projectName" class="form-control" [ngClass]="{ 'is-invalid': submitted && form.projectName.errors }" />
        <div *ngIf="submitted && form.projectName.errors" class="invalid-feedback">
            <div *ngIf="form.projectName.errors.required">Project name is required</div>
        </div>
    </div>
</form>

in ts:

 constructor(
  public dialogRef: MatDialogRef<ImportProjectDialogComponent>,
  @Inject(MAT_DIALOG_DATA) public data: any,
  private formBuilder: FormBuilder){
    this.projectNameForm = this.formBuilder.group({
        projectName: new FormControl(null, [Validators.required, Validators.minLength(1)])
      });
  }

Imports in app module are set correctly. Can anybody help?

Upvotes: 0

Views: 201

Answers (1)

baao
baao

Reputation: 73231

A variable can't be named 

project-name-form

and your component's property is actually called

projectNameForm

you need to pass that to [formGroup]

[formGroup]="projectNameForm"

Upvotes: 1

Related Questions