Questions tagged «angular2-forms»

情况： 请帮忙！我正在尝试使Angular2应用程序中的表单变得非常简单，但是不管它永远无法工作。 角版本： 角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, FormBuilder …

804 angular  typescript  angular2-forms 

棉绒错误消息： src / app / detail / edit / edit.component.ts [111，5]：对于（... 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-forms框架时，我不断收到此错误： 没有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 …

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，它可以在插件中使用，但不能在我的本地系统中使用。 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 = …

178 forms  angular  angular2-template  angular2-forms 

我一直在阅读有关Angular2新Forms API的信息，似乎在表单上有两种方法，一种是模板驱动的表单，另一种是反应性或模型驱动的表单。 我想知道两者之间的实际区别，不是语法上的区别（显然），而是实际用途，以及哪种方法在不同情况下的好处更大。此外，选择一个而不是另一个是否会提高性能？如果是，为什么？

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'; …

109 angular  typescript  angular2-forms 

我正在使用Material 2添加md-raised-button。我只想在某些条件为真时才应用此指令。 例如： <button md-raised-button="true"></button> 另一个例子：我在plunker中创建了一个基本的动态反应形式。我正在使用formArrayName反应形式的指令用于控件数组。我只想formArrayName在特定条件为真时应用指令，否则不要添加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 

我正在使用ReactiveFormsModuleAngular2创建包含表单的组件。这是我的代码： 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 

我正在尝试遍历组件中的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 

FormGroup： 一个FormGroup将每个子FormControl的值聚合到一个对象中，并以每个控件名称作为键。 const form = new FormGroup({ first: new FormControl('Nancy', Validators.minLength(2)), last: new FormControl('Drew') }); FormArray： 甲FormArray聚集每个子FormControl的值到一个数组。 const arr = new FormArray([ new FormControl('Nancy', Validators.minLength(2)), new FormControl('Drew') ]); 什么时候应该使用另一个？

91 angular  angular2-forms  angular-reactive-forms