I am a beginner Angular developer, I was building a todoList App using this tutorial -> https://www.youtube.com/watch?v=WTn2nVphSl8 It was done using Angular 13. Where i am getting an error is in the todo.component.html , it looks like this

<mat-card >
                    <form [ formGroup ] = "todoForm" >
                            <mat-form-field appearance="outline" style="width: 100%; ">
                              <mat-label>Task Name</mat-label>
                              <input formControlName="item" matInput placeholder="Placeholder">
                              <mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
                              <mat-hint>Add task name</mat-hint>
                              
                            </mat-form-field>
                            <button mat-stroked-button color="primary" > Add</button>
                    </form>
                </mat-card>

and my todo.component.ts looks like this

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators} from '@angular/forms';

@Component({
  selector: 'app-todo',
  templateUrl: './todo.component.html',
  styleUrls: ['./todo.component.scss']
})
export class TodoComponent implements OnInit {
  todoForm !: FormGroup;

  constructor(private fb: FormBuilder) { }

  ngOnInit(): void {
    this.todoForm = this.fb.group({
      item : ['', Validators.required],
    })
  }

}

As i was researching i found a lot of reactive forms being implemented using form control, i tried that method but it did not work. the error remained the same. How best can I resolve this. Is it that i am missing something in my todo.component.html or i am supposed to review the way i defined my form in todo.component.ts?

CodePudding user response：

Looks like the spaces in somehow cause the binding not to work as expected. Remove the spaces, i.e. [formGroup] instead of [ formGroup ] in between the square brackets and it should work as expected.

  <form [formGroup] = "todoForm" >
    <!-- Rest of your code -->
  </form>