Angular Forms: "No value accessor for ..."

Question

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() {}
}

Answer 1

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.