如何将 NgForm 和 [(ngModel)] 与 MaterialSelectComponent 和 MaterialDropdownSelectComponent 结合起来？

Question

我知道这个问题类似于1和2，但让我用详细的示例代码解释一下。

我使用组件material-select 和material-dropdown-select 组合来自angular_components material_select_example 3 和4 的代码。 （为了清楚起见，我把完整的代码放在底部）

我想用 NgForm 处理表单结果， 比如现在我使用一个方法logConsole(NgForm form)。

我对材料选择的尝试，

<material-select focusList [selection]="targetLanguageSelection"
                 [(ngModel)]="selectionValue" #langVal="ngForm" (ngControl)="langVal"
                 class="bordered-list">

logConsole() 打印空地图 (Map(0))。我仍然可以从targetLanguageSelection.selectedValues 获取值。

从上面的代码中，如果我设置ngControl="langVal"，我得到一个异常：

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

然后我改为material-dropdown-select，我不能使用ngControl，因为buttonText不会显示选择的值。

<material-dropdown-select
        [buttonText]="selectionValue == null ? 'Select Language' : selectionValue.uiDisplayName"
        [(ngModel)]="selectionValue" #langVal="ngForm"
        [options]="languageListOptions"  displayNameRenderer>

但它仍然失败，logConsole() 仍然打印空地图 (Map(0))。我仍然可以从selectionValue 获取值。

那么如何用 NgForm 获取值呢？

编辑： 我仍在研究如何从MaterialSelectComponent 获得NgForm 值， 我已经可以通过MaterialDropdownSelectComponent 和ngControl 而不是(ngControl) 获得NgForm 值，如下所示：

<material-dropdown-select
        [buttonText]="selectionValue == null ? 'Select Language' : selectionValue.uiDisplayName"
        [(ngModel)]="selectionValue" #langVal="ngForm" ngControl="langVal"
        [options]="languageListOptions"  displayNameRenderer>
</material-dropdown-select>

--

这里是 material_select_demo_component.dart。

@Component(
  selector: 'material-select-demo',
  providers: popupBindings,
  directives: [
    materialInputDirectives,
    formDirectives,
    displayNameRendererDirective,
    FocusListDirective,
    FocusItemDirective,
    MaterialSelectComponent,
    MaterialSelectItemComponent,
    MaterialButtonComponent,
    MaterialDropdownSelectComponent,
    DropdownSelectValueAccessor,
    NgFor,
  ],
  templateUrl: 'material_select_demo_component.html',
  styleUrls: ['material_select_demo_component.css'],
)
class MaterialSelectDemoComponent {
  final SelectionModel<Language> targetLanguageSelection =
      SelectionModel.single();

  Language selectionValue;

  ExampleSelectionOptions languageListOptions =
      ExampleSelectionOptions(_languagesList);

  List<Language> get languagesList => _languagesList;

  void logConsole(NgForm form) {
    html.window.console.log(form.value);
    html.window.console.log(selectionValue);
    html.window.console
        .log(targetLanguageSelection.selectedValues.toList().toString());
  }

  static const List<Language> _languagesList = <Language>[
    Language('en-US', 'US English'),
    Language('en-UK', 'UK English'),
    Language('fr-CA', 'Canadian English'),
    Language('zh-CN', 'Chichewa'),
    Language('zh-TW', 'Chinese'),
    Language('ny', 'Chinese (Simplified)'),
    Language('zh', 'Chinese (Traditional)'),
  ];
}

class Language implements HasUIDisplayName {
  final String code;
  final String label;
  const Language(this.code, this.label);
  String toString() => '${label} (${code})';
  @override
  String get uiDisplayName => label;
}

class ExampleSelectionOptions extends StringSelectionOptions<Language>
    implements Selectable<Language> {
  ExampleSelectionOptions(List<Language> options)
      : super(options,
            toFilterableString: (Language option) => option.toString());
  ExampleSelectionOptions.withOptionGroups(List<OptionGroup> optionGroups)
      : super.withOptionGroups(optionGroups,
            toFilterableString: (Language option) => option.toString());
  @override
  SelectableOption getSelectable(Language item) =>
      item is Language && item.code.contains('en')
          ? SelectableOption.Disabled
          : SelectableOption.Selectable;
}

这是 material_select_demo_component.html：

<form #languageForm="ngForm">
<section>
    <material-select focusList [selection]="targetLanguageSelection" class="bordered-list">
        <material-select-item *ngFor="let language of languagesList"
                              focusItem [value]="language"
                              displayNameRenderer>
        </material-select-item>
    </material-select>
</section>
<section>
    <material-dropdown-select
            [buttonText]="selectionValue == null ? 'Select Language' : selectionValue.uiDisplayName"
            [options]="languageListOptions" [(ngModel)]="selectionValue" displayNameRenderer>
    </material-dropdown-select>
</section>
    <material-button raised (click)="logConsole(languageForm)">submit</material-button>
</form>

pubspec.yaml 文件

environment:
  sdk: '>=2.4.0 <3.0.0'

dependencies:
  angular: ^6.0.0-alpha
  angular_components: ^0.14.0-alpha
  angular_forms: ^2.1.3

谢谢。

Answer 1

我建议从非常简单的开始并使用 FormBuilder：

class Language {
  final String code;
  final String label;
  const Language(this.code, this.label);

  @override
  String toString() => label;
}

在您的组件中：

StringSelectionOptions<Language> languageOptions = StringSelectionOptions<Language>(_languagesList);
Language selectedLanguage;

ControlGroup myForm;

void ngOnInit() {
    myForm = FormBuilder.controlGroup({
      'language': FormBuilder.controlGroup([selectedLanguage]);
    });
}

void onSubmit() {
   print(myForm.value);
   print(selectedLanguage);
}

<form [ngFormModel]="myForm" (ngSubmit)="onSubmit()">
    <material-dropdown-select
            buttonText="{{selectedLanguage??'Choose ...'}}"
            [(ngModel)]="selectedLanguage"
            ngControl="language"
            [options]="languageOptions">
    </material-dropdown-select>
    <material-button
            [disabled]="!myForm.valid"
            (trigger)="onSubmit()">Submit</material-button>
</form>