1
最近、テンプレート駆動型の代わりにモデル駆動型に移行し始めました。main.tsに "provideForms（）"を追加した後のテンプレート駆動型フォームの問題
私はにprovideForms(),を追加する必要がありました。
リファレンス "#firstNameForm" に定義されて数回
ここ
が完全なメッセージです：
browser_adapter.ts:82 EXCEPTION: Error: Uncaught (in promise): Template parse errors:
Reference "#firstNameForm" is defined several times ("<h4>{{'FIRST_NAME_FORM.TITLE' | translate}}</h4>
<form (ngSubmit)="updateFirstName(firstNameForm)" [ERROR ->]#firstNameForm="ngForm" novalidate>
<div class="form-group" [ngClass]="getCssClasses(firstNameFor"): [email protected]:50BrowserDomAdapter.logError @ browser_adapter.ts:82BrowserDomAdapter.logGroup @ browser_adapter.ts:93ExceptionHandler.call @ exception_handler.ts:58(anonymous function) @ application_ref.ts:374schedulerFn @ async.ts:148SafeSubscriber.__tryOrUnsub @ Subscriber.ts:240SafeSubscriber.next @ Subscriber.ts:192Subscriber._next @ Subscriber.ts:133Subscriber.next @ Subscriber.ts:93Subject._finalNext @ Subject.ts:154Subject._next @ Subject.ts:144Subject.next @ Subject.ts:90EventEmitter.emit @ async.ts:133onError @ ng_zone.ts:142onHandleError @ ng_zone_impl.ts:95ZoneDelegate.handleError @ zone.js:327Zone.runGuarded @ zone.js:233_loop_1 @ zone.js:487drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426
browser_adapter.ts:82 STACKTRACE:BrowserDomAdapter.logError @ browser_adapter.ts:82ExceptionHandler.call @ exception_handler.ts:61(anonymous function) @ application_ref.ts:374schedulerFn @ async.ts:148SafeSubscriber.__tryOrUnsub @ Subscriber.ts:240SafeSubscriber.next @ Subscriber.ts:192Subscriber._next @ Subscriber.ts:133Subscriber.next @ Subscriber.ts:93Subject._finalNext @ Subject.ts:154Subject._next @ Subject.ts:144Subject.next @ Subject.ts:90EventEmitter.emit @ async.ts:133onError @ ng_zone.ts:142onHandleError @ ng_zone_impl.ts:95ZoneDelegate.handleError @ zone.js:327Zone.runGuarded @ zone.js:233_loop_1 @ zone.js:487drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426
は、それ以来、私のすべてのテンプレート駆動型の形式は、次のような例外を発生させますコンポーネントファイルは次のとおりです。
import {Component, OnInit} from "@angular/core";
import {ControlGroup, NgClass} from "@angular/common";
import {ROUTER_DIRECTIVES, Router} from "@angular/router";
import {TranslatePipe} from "ng2-translate/ng2-translate";
import {UserAccountService} from "../useraccount.service";
import {AppConstants} from "../../shared/app-constants";
import {StylingService} from "../../shared/services/styling.service";
import {UserAccount} from "../../shared/models/useraccount.model";
@Component({
moduleId: module.id,
templateUrl: 'useraccount-firstname.component.html',
directives: [ROUTER_DIRECTIVES, NgClass],
pipes: [TranslatePipe]
})
export class UserAccountFirstNameComponent implements OnInit {
//TODO (code review): user account's first name is updated in real time when user types into the first name form, before even they have validated the form. How can I avoid that?
currentUserAccount:UserAccount;
submitted:boolean = false;
FIRST_NAME_PATTERN = AppConstants.FIRST_NAME_PATTERN;
getCssClasses = this.stylingService.getCssClasses;
isSuccessFeedback = this.stylingService.isSuccessFeedback;
isErrorFeedback = this.stylingService.isErrorFeedback;
constructor(private userAccountService:UserAccountService,
private stylingService:StylingService,
private router:Router) {
}
ngOnInit() {
this.userAccountService.currentUserAccount$.subscribe({
next: (param)=>this.currentUserAccount = param
});
}
updateFirstName(firstNameForm:ControlGroup) {
this.submitted = true;
if (firstNameForm.valid) {
this.userAccountService.updateFirstName(this.currentUserAccount);
this.router.navigate(['/dashboard/useraccount']);
}
}
}
コンポーネントのテンプレートです：
<h4>{{'FIRST_NAME_FORM.TITLE' | translate}}</h4>
<form (ngSubmit)="updateFirstName(firstNameForm)" #firstNameForm="ngForm" novalidate>
<div class="form-group" [ngClass]="getCssClasses(firstNameForm, firstName)">
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon icon-account" aria-hidden="true"></span>
</span>
<input type="text"
ngControl="firstName"
#firstName="ngForm"
required
minlength="2"
maxlength="35"
pattern_="FIRST_NAME_PATTERN"
[ngModel]="currentUserAccount?.firstName"
(ngModelChange)="currentUserAccount ? currentUserAccount.firstName = $event : null"
placeholder="{{'FIRST_NAME_FORM.NEW_FIRST_NAME'| translate }}"
class="form-control"/>
</div>
<span *ngIf="isSuccessFeedback(firstNameForm, firstName)" class="form-control-feedback" aria-hidden="true">
<span class="glyphicon icon-accept" aria-hidden="true"></span>
</span>
<span *ngIf="isErrorFeedback(firstNameForm, firstName)" class="form-control-feedback" aria-hidden="true">
<span class="glyphicon icon-close" aria-hidden="true"></span>
</span>
<div [hidden]="firstName.valid || !submitted">
<div *ngIf="firstName?.errors?.required" class="control-label">{{'FIRST_NAME_FORM.REQUIRED'| translate}}</div>
<div *ngIf="firstName?.errors?.minlength" class="control-label">{{'FIRST_NAME_FORM.MIN_LENGTH'| translate}}</div>
<div *ngIf="firstName?.errors?.maxlength" class="control-label">{{'FIRST_NAME_FORM.MAX_LENGTH'| translate}}</div>
<div *ngIf="firstName?.errors?.pattern" class="control-label">{{'FIRST_NAME_FORM.PATTERN'| translate}}</div>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary pull-right" [disabled]="buttonDisabled">{{'FIRST_NAME_FORM.SUBMIT'| translate}}</button>
<a [routerLink]="['/dashboard/useraccount']" class="btn btn-link pull-right text-right">{{'FORM_CANCEL' | translate}}</a>
</div>
</form>
は誰でも助けてくださいことはできますか？
が見えない
@angular/forms参照からインポートする代わりに
からフォームのものをインポートしません'moduleId'に渡します。なぜあなたはそれがだと思いますか？あなたはPlunkerで再現しようとしますか？ –
あなたはそうです：moduleIdとは無関係なようです。この投稿を調査して編集しましょう。 – balteo
投稿を編集しました。問題は、私が** main.ts **に 'provideForms（）'を追加した後に発生し始めました。 – balteo