如何使用Dart绑定angular2中的ngFormModel？

发布时间：2020-12-17 10:23:16 所属栏目：安全来源：网络整理

导读：以下在表单中工作(显示表单) html的 form (ngSubmit) = "onSubmit()" #nameForm = "ngForm" {{diagnostic}} div class = "mdl-card mdl-shadow--3dp layout horizontal wrap" div class = "mdl-card__title" h2 class = "mdl-card__title-text"Name/h2 /div

以下在表单中工作(显示表单)

html的

<form (ngSubmit) = "onSubmit()"
         #nameForm = "ngForm">
    {{diagnostic}}
    <div class = "mdl-card mdl-shadow--3dp layout horizontal wrap">
      <div class = "mdl-card__title">
        <h2 class = "mdl-card__title-text">Name</h2>
      </div>

      <div
          class = "mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
        <input
            required
            type = "text"
            [(ngModel)] = "name.first"
            ngControl = "first"
            #first = "ngForm"
            (input)="onInputHandler($event)"
            class = "mdl-textfield__input ng-valid"
            id = "first">
        <label
            class = "mdl-textfield__label"
            for = "first">First</label>
        <span [hidden] = "isFirstValid"
              class =  "mdl-textfield__error">{{firstErrorMsg}}</span>
      </div>

      <div class =
               "mdl-card__actions mdl-card--border">
        <button id = "startButton"
                class = "mdl-button mdl-js-button mdl-button--raised mdl-button--accent mdl-js-ripple-effect"
        >Submit
        </button>

    <br>
    <button class = "mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
      Button All
    </button>

  </form>

试着在Forms and Validation in Angular 2.0关注这个例子,

我无法通过将表单的第一行更改为显示UI

<form (ngSubmit) = "onSubmit()"
        [ngFormModel]="form" #f="form">
    {{diagnostic}}
..

通过更改,浏览器根本无法显示任何内容,就好像它无法解析标记一样 – 错误实际上显示在pub-serve或debug模式中.

Transform TemplateCompiler on epimss_ng2_reg|lib/components/name_component.ng_meta.json threw error: Template parse errors:
There is no directive with "exportAs" set to "form" ("
<div [hidden] = "isSubmitted">
  <form (ngSubmit) = "onSubmit()"
        [ng-form-model]="form" [ERROR ->]#f="form">
    {{diagnostic}}
    <div class = "mdl-card mdl-shadow--3dp layout horizontal wrap">
"): NameComponent@12:31
....

为什么这不起作用？

从创建博客文章开始,这似乎发生了变化.
NgForm现在以ngForm而不是形式导出.

[ngFormModel]="form" #f="ngForm">

它在GitHub source中是正确的,但在博客文章中没有.

完整组件根据Dart博客文章中的示例

@Component(selector: 'form-element')
@View(template: '''
<h1>form-element</h1>
<form (ngSubmit)="onSubmit()" [ngFormModel]="form" #f="ngForm">
    <div>
        <div class="formHeading">First Name</div>
        <input type="text" id="firstName" ngControl="firstName">
        <div class="errorMessage" *ngIf="f.form.controls['firstName'].touched && !f.form.controls['firstName'].valid">First Name is required</div>
    </div>
    <div>
        <div class="formHeading">Street Address</div>
        <input type="text" id="firstName" ngControl="streetAddress">
        <div class="errorMessage" *ngIf="f.form.controls['streetAddress'].touched && !f.form.controls['streetAddress'].valid">Street Address is required</div>
    </div>
    <div>
        <div class="formHeading">Zip Code</div>
        <input type="text" id="zip" ngControl="zip">
        <div class="errorMessage" *ngIf="f.form.controls['zip'].touched && !f.form.controls['zip'].valid">Zip code has to be 5 digits long</div>
    </div>
    <div>
        <div class="formHeading">Address Type</div>
        <select id="type" ngControl="type">
            <option [value]="'home'">Home Address</option>
            <option [value]="'billing'">Billing Address</option>
        </select>
    </div>
    <button type="submit" [disabled]="!f.form.valid">Save</button>
    <div>
        <div>The form contains the following values</div>
        <div>
            {{payLoad}}
        </div>
    </div>
</form>
''')
class FormElement {
  ControlGroup form;
  String payLoad;
  FormElement(FormBuilder fb) {
    form = fb.group({
      "firstName": ['',Validators.required],"streetAddress": ['',"zip": [
        '',Validators.compose([ZipValidator.validate])
      ],"type": ['home']
    });
  }

  void onSubmit() {
    payLoad = JSON.encode(this.form.value);
  }
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!