标签: angular2-forms

我目前正在使用Angular Forms版本2.0.0,并尝试使用联系表单内部联系我们模式.

在ContactComponent加载后,我得到:

EXCEPTION:this.form._updateTreeValidity不是函数

1. 我已经看到一些其他的堆栈帖子暗示使用FormGroup而不是FormBuilder来初始化组件构造函数中的表单对象现在是新API的标准,所以我已经更新了.

2. 我导入ReactiveFormsModule和FormsModule以及所有与表单相关的组件,并且错误似乎与模块无关.

3. 我的TypeScript不会在编译时抛出错误,Visual Studio Intellisense似乎能够很好地找到所有FormGroup函数,为什么会在运行时发生这种情况？...

我的代码:

contact.component.ts:

import { Component, Input, ViewChild } from '@angular/core';
import { ApiService } from '../../../services/api.service';
import { ModalComponent } from 'ng2-bs3-modal/ng2-bs3-modal';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { FormsModule, ReactiveFormsModule, FormGroup, FormControl, Validators } from '@angular/forms';
import 'rxjs/Rx';

declare var jQuery: any;

@Component({
    selector: 'my-contact',
    templateUrl: 'app/modules/footer/contact/contact.html'
})
export class ContactComponent {

    private contactForm: FormGroup;
    private invalidEmail: boolean;
    private invalidSubject: boolean;
    private invalidMessage: boolean;

    constructor(private apiService: ApiService, …

当文件输入发生变化时,Angular 2似乎在运行验证时遇到麻烦.

我做了一个插图来说明这个问题:

我创建了一个formGroup

this.frm = new FormGroup({
    file: new FormControl("", this.validateFile)
});

在validateFile函数中,我抛出一个警报并记录到控制台:

public validateFile(formControl: FormControl): {[key: string]: any; } {
   alert('Validation ran');
   console.log('Validation ran');
}

Plunkr来说明问题:https://plnkr.co/edit/Pgcg4IkejgaH5YgbY3Ar？p = preview

验证将在初始化页面时运行,但每次更改要上载的文件时都不会运行.

有没有解决这个问题的方法？

我有一个字段,我想用多个验证器验证.
使用Module Driven方法,代码看起来像这样:

this.exampleForm = this.fb.group({
    date_start : ['', Validators.compose([
                          Validators.required, 
                          Validators.pattern("[0-9]{2}-[0-9]{2}-[0-9]{4}")
                      ])
                 ]
})

但是我也可以在没有Validators.compose()的情况下编写这个:

this.exampleForm = this.fb.group({
    date_start : ['', [
                          Validators.required, 
                          Validators.pattern("[0-9]{2}-[0-9]{2}-[0-9]{4}")
                      ]
                 ]
})

它工作得很好.我个人比较喜欢第二个版本(无撰写),更少的代码和更好的可读性.这就引出了一个问题,我为什么要使用Validators.compose()？

我面临着问题formGroup.首先基于URL我采取一些价值并调用API来检索前场文本的特定用户数据.

register.html

<form [formGroup]="form" (ngSubmit)="onSubmit(form.value)" class="form-horizontal">
    <div class="form-group row">
        <label for="inputEmail3" class="col-sm-4 ">Username</label>
        <div class="col-sm-8">
            <input [formControl]="email" type="text" class="form-control" id="inputEmail3" placeholder="Email Address" [readonly]="isReadOnly">
        </div>
    </div>
</form>

register.component.ts

import { Component } from '@angular/core';
import { FormGroup, AbstractControl, FormBuilder, Validators } from '@angular/forms';
import { Router, ActivatedRoute } from '@angular/router';
import { EmailValidator, EqualPasswordsValidator } from '../../theme/validators';

@Component({
  selector: 'register',
  templateUrl: './register.html',
})
export class Register {
  public form: FormGroup;
  public email: AbstractControl;
  public username: string;

  constructor(private registerService: RegisterService, …

我试图使用角度为2的ngControl值来验证输入字段.我需要验证用户始终以大写形式输入值.

现在我们需要将用户输入的值转换为大写.但是我使用ngControl处理输入字段中的值,而不是ngModel(考虑到我可以使用ngModelChange事件将值更新为大写.)

那么转换ngControl使用的值的最佳和低成本方法是什么？

我尝试导入FromGroup,FormBuilder并对FormControl我CustomModule:

import { FormsModule, FormGroup }   from '@angular/forms';

@NgModule({
  imports: [
    FormsModule,
    FormGroup
  ]
})

但它抛出一个错误:

EXCEPTION:未捕获(在承诺中):错误:模块'CustomModule'导入的意外值'FormGroup'

如果我只导入FormsModule它工作正常.

有任何想法吗？

因此能够订阅回调到NgForm的valueChanges观察特性,以反应形式的控制的值的变化.

我需要以相同的方式对用户触摸其中一个表单控件的事件作出反应.

这个类似乎定义了valueChangesObservable,touched属性被定义为一个布尔值.

有没有办法对"控制感动"事件做出反应？

我在我的应用程序中使用了Material 2,但在这个问题中,我想用Input专门解决问题.

正如您在API Reference中看到的那样,有一个名为的属性绑定required,在占位符中显示为星号.

所以,我想知道是否有办法检查表单控件是否在Angular中有一个特定的验证器,因为我真的不想为每个输入手动设置[required]="true/false"

我阅读了AbstractControl文档,但我没有找到任何相关内容.我遇到的hasError 方法(这具有讽刺意味的是没有记录无处 ......无论是在FormGroup也不FormControl也不AbstractControl),但是这不是我要找的.它只是检查表单控件是否有错误,但正如您可能已阅读过,我想检查控件是否有一些特定的验证器...

一些代码:

<md-input-container>
  <input placeholder="Placeholder" 
         mdInput [formControl]="anyCtrl" 
         [required]="anyCtrl.hasValidator('required')"> <!-- something like this -->
</md-input-container>

我希望这个问题足够清楚.提前致谢.

我正在尝试设置2个字段值<input matInput>abnd <mat-select>编程.对于文本输入,一切都按预期工作,但是对于<mat-select>视图,这个字段就像它有价值一样null.但是,如果我打电话,console.log(productForm.controls['category'].value它会打印出我以编程方式设置的正确值.我错过了什么吗？

这是代码:

表单配置:

productForm = new FormGroup({
        name: new FormControl('', [
            Validators.required
        ]),
        category: new FormControl('', [
            Validators.required
        ]),
    });

设定值:

ngOnInit() {
        this.productForm.controls['name'].setValue(this.product.name);
        this.productForm.controls['category'].setValue(this.product.category);
    }
}

HTML:

<mat-form-field>
    <mat-select [formControlName]="'category'"
                [errorStateMatcher]="errorStateMatcher">
        <mat-option *ngFor="let category of categories" [value]="category">
            {{category.name}}
        </mat-option>
    </mat-select>
</mat-form-field>

我在获取从Angular 2(RC1)中的选择列表中选择的对象的属性时遇到问题.采用以下语法:

<select required [(ngModel)]="model.plan">
  <option selected="selected" disabled>Plan...</option>
  <option *ngFor="#plan of plans" [value]="plan">{{ plan.name }}</option>
</select>

其中plans定义为对象数组:

[{ name: 'Plan 1' }, { name: 'Plan 2' }]

如果您尝试输出所选对象的某个键的值,则不会显示任何内容:

<p>{{ model.plan?.name }}</p> // Shows nothing if a plan is selected

这是Angular2表单现场演示的一个分支,显示了这个问题.从选择列表中选择"计划2",然后看到没有显示任何内容.

这里发生了什么？