Angular Forms: "No value accessor for …"

Issue

Using the AngularDart Material package. Could really use some help on this error:

“No value accessor for (username) or you may be missing formDirectives in your directives list.”

Minimal setup (formDirectives is specified in directives list):

login.html

<form (ngSubmit)="onSubmit()" #form="ngForm">
        <material-input class="username" ngControl="username" [(ngModel)]="username"
            [required]="true"
            [floatingLabel]="true"
            label="Username">
        </material-input>
</form>

login.dart

import 'package:angular/angular.dart';
import 'package:angular_components/angular_components.dart';
import 'package:angular_forms/angular_forms.dart';

@Component(
  selector: 'login',
  styleUrls: const ['style.css'],
  templateUrl: 'login.html',
  directives: const [formDirectives,MaterialInputComponent,]
)
class LoginComponent {

  String username;
  void onSubmit() {}
}

Solution

You need the ControlValueAccessor for material-input in your directives list.

Better to use materialInputDirectives instead of MaterialInputComponent directly as it has the other directives you might want to use to interact with the value.

Answered By – Ted Sander

Answer Checked By – Clifford M. (FlutterFixes Volunteer)