以下在表单中工作(显示表单)
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而不是形式导出.
NgForm现在以ngForm而不是形式导出.
[ngFormModel]="form" #f="ngForm">
它在GitHub source中是正确的,但在博客文章中没有.
@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); } }