angulardart / angular_components

The official Material Design components for AngularDart. Used at Google in production apps.
https://pub.dev/packages/angular_components
374 stars 123 forks source link

material-dropdown-select does not work with reactive forms ngFormGroup, ngControl, ngFormControl #451

Open Antoniossss opened 4 years ago

Antoniossss commented 4 years ago

I have following markup:

<form *ngIf="testModel !=null" [ngFormModel]="testModel">
    <input [ngFormControl]="testModel.controls['test1']"/>
    <input ngControl="test1"/>
    <material-input ngControl="test1"></material-input>
    <material-dropdown-select [ngFormControl]="testModel.controls['test2']"></materia-dropdown-select>
    <material-dropdown-select ngControl="test2"[options]="[1,2,3,4]"></material-dropdown-select>
</form>

and backcode


    testModel = FormBuilder.controlGroup({
      "test1": ["", Validators.required],
      "test2": ["", Validators.required]
    });
    testModel.controls['test2'].value;
    print( testModel.controls['test2']);

I have added directrives like


    coreDirectives,
    formDirectives,
    materialInputDirectives,

With that basic setup I got exception dart_sdk.js:98521 EXCEPTION: Assertion failed: org-dartlang-app:///packages/angular_forms/src/directives/shared.dart:25:7 dir.valueAccessor != null "No value accessor for () or you may be missing formDirectives in your directives list."

If I comment out first materiald-dropdown-select i got

"No value accessor for (test2) or you may be missing formDirectives in your directives list."

model is created in component constructor so lifecycle should not be an isse here . Commenting out both dropdowns makes at least inputs work almost as expected (binding is only from input to model, updaing model does not update other inputs)

What am I doint wrong? It works with plain Angular + TS.

giorgiofran commented 4 years ago

You have to add also "MaterialDropdownSelectComponent" and "MaterialInputComponent" in your directives list