タグ付けされた質問 「angular2-forms」

状況： 助けてください！私はAngular2アプリで非常にシンプルなフォームを作成しようとしていますが、何が機能するかは関係ありません。 角度バージョン： Angular 2.0.0 Rc5 エラー： Can't bind to 'formGroup' since it isn't a known property of 'form' コード： 景色： <form [formGroup]="newTaskForm" (submit)="createNewTask()"> <div class="form-group"> <label for="name">Name</label> <input type="text" name="name" required> </div> <button type="submit" class="btn btn-default">Submit</button> </form> コントローラ： import { Component } from '@angular/core'; import { FormGroup, FormControl, Validators, …

806 angular  typescript  angular2-forms 

リントエラーメッセージ： src / app / detail / edit / edit.component.ts [111、5]：for（... in ...）ステートメントは、ifステートメントでフィルタリングする必要があります コードスニペット（これは動作するコードです。angular.ioフォーム検証セクションでも入手できます）： for (const field in this.formErrors) { // clear previous error message (if any) this.formErrors[field] = ''; const control = form.get(field); if (control && control.dirty && !control.valid) { const messages = this.validationMessages[field]; for (const key in control.errors) …

229 angular  angular2-forms  angular-cli  tslint 

TypeScriptのAngular2フォームフレームワークを使用しているときに、このエラーが発生し続けます。 directive「exportAs」が「ngForm」に設定されているものはありません これが私のコードです プロジェクトの依存関係： "dependencies": { "@angular/common": "2.0.0-rc.6", "@angular/compiler": "2.0.0-rc.6", "@angular/core": "2.0.0-rc.6", "@angular/forms": "2.0.0-rc.6", "@angular/http": "2.0.0-rc.6", "@angular/platform-browser": "2.0.0-rc.6", "@angular/platform-browser-dynamic": "2.0.0-rc.6", "@angular/router": "3.0.0-rc.2", "ng2-bootstrap": "^1.1.1", "reflect-metadata": "^0.1.8", "core-js": "^2.4.0", "es6-module-loader": "^0.17.8", "rxjs": "5.0.0-beta.11", "systemjs": "0.19.27", "zone.js": "0.6.17", "jquery": "3.0.0", } そして、これはログインテンプレートです： <form #loginForm="ngForm" (ng-submit)="authenticate(loginForm.value)"> </form> ...そしてログインコンポーネント： import { Component } from …

226 angular  typescript  forms  angular2-forms 

ログインフォームに取り組んでいます。ユーザーが無効な資格情報を入力した場合、電子メールとパスワードの両方のフィールドに無効のマークを付け、ログインに失敗したことを示すメッセージを表示します。監視可能なコールバックからこれらのフィールドを無効に設定するにはどうすればよいですか？ テンプレート： <form #loginForm="ngForm" (ngSubmit)="login(loginForm)" id="loginForm"> <div class="login-content" fxLayout="column" fxLayoutAlign="start stretch"> <md-input-container> <input mdInput placeholder="Email" type="email" name="email" required [(ngModel)]="email"> </md-input-container> <md-input-container> <input mdInput placeholder="Password" type="password" name="password" required [(ngModel)]="password"> </md-input-container> <p class='error' *ngIf='loginFailed'>The email address or password is invalid.</p> <div class="extra-options" fxLayout="row" fxLayoutAlign="space-between center"> <md-checkbox class="remember-me">Remember Me</md-checkbox> <a class="forgot-password" routerLink='/forgot-password'>Forgot Password?</a> …

190 validation  angular  angular2-forms 

Angular 2で動的フォームを実装しようとしています。動的フォームに削除やキャンセルなどの機能を追加しました。私はこのドキュメントに従いました：https : //angular.io/docs/ts/latest/cookbook/dynamic-form.html コードに変更を加えました。ここでエラーが発生します。 このエラーを解消するにはどうすればよいですか？ 完全なコードはhttp://plnkr.co/edit/SL949g1hQQrnRUr1XXqt?p=previewにあります。これは、plunkerでは機能しますが、ローカルシステムでは機能しません。 HTMLコード： <div> <form [formGroup]="form"> <div *ngFor="let question of questions" class="form-row"> <label [attr.for]="question.key">{{question.label}}</label> <div [ngSwitch]="question.controlType"> <input *ngSwitchCase="'textbox'" [formControlName]="question.key" [id]="question.key" [type]="question.type" [(ngModel)]="question.value"> <select [id]="question.key" [(ngModel)]="question.value" *ngSwitchCase="'dropdown'" [formControlName]="question.key" > <option *ngFor="let opt of question.options" [ngValue]="opt.key" >{{opt.value}}</option> </select> <input *ngSwitchCase="'checkbox'" [(ngModel)]="question.value" [id]="question.key" [type]="question.type" (change)="question.value = ck.checked" #ck …

178 forms  angular  angular2-template  angular2-forms 

私はAngular2の新しいフォームAPIについて読んでいますが、フォームには2つのアプローチがあるようです。1つはテンプレート駆動フォームで、もう1つは反応フォームまたはモデル駆動フォームです。 （明らかに）構文の違いではなく、2つの実際的な使用方法の違いを知りたいのですが、実際の使用方法と、さまざまなシナリオでどちらのアプローチがよりメリットがあるかを知りたいと思います。また、どちらか一方を選択するとパフォーマンスが向上しますか？そして、もしそうなら、なぜですか？

157 angular  angular2-forms 

angular2[disable]では、次のような属性を持つボタンを無効にできることを知っています 。 <button [disabled]="!isValid" (click)="onConfirm()">Confirm</button> しかし、[ngClass]またはを使用してそれを行うことができ[ngStyle]ますか？そのようです： <button [ngStyle]="{disabled : !isValid}" (click)="onConfirm()">Confirm</button> ありがとう。

113 html  angular  angular2-template  angular2-forms 

Angular 2反応フォームのコントロールを無効にすると、コントロールがform.valueに含まれないことに気付きました。たとえば、次のようにフォームを定義するとします。 this.notelinkingForm = new FormGroup({ Enabled: new FormControl(settings.Enabled, Validators.required), LinkToPreceeding: new FormControl({value: settings.LinkToPreceeding, disabled: !settings.Enabled}, Validators.required), LinkingTolerance: new FormControl({value: settings.LinkingTolerance, disabled: !settings.Enabled}, Validators.required) }); this.notelinkingForm.valueを確認します。すべてのコントロールが有効になっている場合、出力は次のようになります。 {"Enabled":true, "LinkToPreceeding": true, LinkingTolerance:"100"} ただし、一部のコントロールが無効になっている場合は、次のようになります。 {"Enabled":true} 無効になっているコントロールがどのように除外されているかに注意してください。 私の意図は、フォームが変更されたときに、フォーム内のすべてのプロパティを含むform.valueを残りのAPIに渡せるようにすることです。無効なアイテムが含まれていない場合、これは明らかに不可能です。 ここに何か不足していますか、これは予想される動作ですか？Angularに無効なアイテムをform.valueに含めるように指示する方法はありますか？ あなたの考えを歓迎します。

113 angular  angular2-forms 

私はRC4を使用していますが、エラーが発生しますテンプレートが原因で、「exportAs」が「ngForm」に設定されたディレクティブはありません。 <div class="form-group"> <label for="actionType">Action Type</label> <select ngControl="actionType" ===> #actionType="ngForm" id="actionType" class="form-control" required> <option value=""></option> <option *ngFor="let actionType of actionTypes" value="{{ actionType.label }}"> {{ actionType.label }} </option> </select> </div> boot.ts： import {disableDeprecatedForms, provideForms} from '@angular/forms'; import {bootstrap} from '@angular/platform-browser-dynamic'; import {HTTP_PROVIDERS, Http} from '@angular/http'; import {provideRouter} from '@angular/router'; import {APP_ROUTER_PROVIDER} …

109 angular  typescript  angular2-forms 

マテリアル2を使用して追加していmd-raised-buttonます。特定の条件が成立した場合にのみ適用したい。 例えば： <button md-raised-button="true"></button> 別の例：plunkerで基本的な動的反応フォームを作成しました。formArrayNameコントロールの配列に反応型のディレクティブを使用しています。formArrayName特定の条件がtrueになった場合にのみディレクティブを適用し、それ以外の場合はformArrayNameディレクティブを追加しません。 こちらがプランカーリンクです。

109 angular  angular-material  angular2-forms  angular2-directives  angular-material2 

このエラーを修正できないようです。検索バーとngForがあります。私はこのようなカスタムパイプを使用して配列をフィルタリングしようとしています： import { Pipe, PipeTransform } from '@angular/core'; import { User } from '../user/user'; @Pipe({ name: 'usersPipe', pure: false }) export class UsersPipe implements PipeTransform { transform(users: User [], searchTerm: string) { return users.filter(user => user.name.indexOf(searchTerm) !== -1); } } 使用法： <input [(ngModel)]="searchTerm" type="text" placeholder="Search users"> <div *ngFor="let user of …

105 angular  angular2-forms  angular2-pipe 

同じformControlNameにバインドされたチェックボックスのリストが与えられたformControl場合、単にtrue/ false？ではなく、どのようにバインドされたチェックボックス値の配列を生成できますか？ 例： <form [formGroup]="checkboxGroup"> <input type="checkbox" id="checkbox-1" value="value-1" formControlName="myValues" /> <input type="checkbox" id="checkbox-2" value="value-2" formControlName="myValues" /> <input type="checkbox" id="checkbox-3" value="value-2" formControlName="myValues" /> </form> checkboxGroup.controls['myValues'].value 現在は以下を生成します： true or false 私が作りたいもの： ['value-1', 'value-2', ...]

104 javascript  angular  checkbox  angular2-forms 

私が使用しているReactiveFormsModuleフォームが含まれているコンポーネントを作成するAngular2の。これが私のコードです： foo.component.ts： constructor(fb: FormBuilder) { this.myForm = fb.group({ 'fullname': ['', Validators.required], 'gender': [] }); } foo.component.html（と[formControl]）： <div class="fields"> <div class="field"> <label>Fullname*</label> <input type="text" [formControl]="myForm.controls.fullname"/> </div> </div> <div class="inline fields"> <label for="gender">Gender</label> <div class="field"> <div class="ui radio checkbox"> <input type="radio" name="gender" checked="" tabindex="0" class="hidden" [formControl]="myForm.controls.gender"> <label>Male</label> </div> </div> <div class="field"> <div …

97 angular  radio-button  angular2-forms  form-control  angular2-formbuilder 

RC5にアップグレードした後、次のエラーが発生し始めました。 ngModel cannot be used to register form controls with a parent formGroup directive. Try using formGroup's partner directive "formControlName" instead. Example: <div [formGroup]="myGroup"> <input formControlName="firstName"> </div> In your class: this.myGroup = new FormGroup({ firstName: new FormControl() }); Or, if you'd like to avoid registering this form control, indicate that …

93 angular  angular2-forms  angular2-formbuilder 

コンポーネントのformArrayを反復処理しようとしていますが、次のエラーが発生します Error: Cannot find control with unspecified name attribute これが私のクラスファイルのロジックの様子です export class AreasFormComponent implements OnInit { public initialState: any; public areasForm: FormGroup; constructor(private fb: FormBuilder) { } private area(): any { return this.fb.group({ name: ['', [Validators.required]], latLong: ['', [Validators.required]], details: ['', [Validators.required]] }); } public ngOnInit(): void { this.areasForm = …

92 loops  angular  angular2-forms