5

以下はフォームで動作します(フォームが表示されます)

.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 モードまたはデバッグ モードで表示されます。

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
....

なぜこれが機能しないのですか?

4

1 に答える 1