标签: angular2-forms

我正在使用angular2,新形式的api.

我想要一个电话号码输入框,它会在用户输入时自动格式化.

例如用户类型:

12345678901

当他们输入一个可识别的电话号码时,它会变为

1 (234) 567-8901

我想出了如何在输入控件上添加一个指令,但我不知道如何将自己注入到输入处理管道中.

我希望在一个有角度的2模板中有一个简单的html表单(在没有依赖javascript的情况下执行POST).

拥有以下普通的POST表单:

<form action="connect/facebook" method="POST">
  <input type="hidden" name="scope" value="public_profile,email"/>
  <button type="submit">Connect to FB</button>
</form>

在html模板中会导致以下错误:

 Template parse errors: No provider for ControlContainer ("
    <h2 class="text-xs-center">{{'SIGNIN_FORM.TITLE' | translate}}</h2>

    [ERROR ->]<form action="connect/facebook" method="POST">
    <input type="hidden" name="scope" value="pub"): SigninComponent@6:8 ; Zone: <root> ; Task: Promise.then ; Value:
 Error: Template parse errors: No provider for ControlContainer ("
   <h2 class="text-xs-center">{{'SIGNIN_FORM.TITLE' | translate}}</h2>

   [ERROR ->]<form action="connect/facebook" method="POST">
   <input type="hidden" name="scope" value="pub"): SigninComponent@6:8
    at TemplateParser.parse (http://localhost:8080/main.bundle.js:20619:19)
    at RuntimeCompiler._compileTemplate (http://localhost:8080/main.bundle.js:42414:51)
    at http://localhost:8080/main.bundle.js:42337:83
    at Set.forEach (native)
    at compile (http://localhost:8080/main.bundle.js:42337:47) …

我有一个简单的表格建立与FormBuilder：

this.contactForm = formBuilder.group({
  'name': [''],
  'email': [''],
  'phone': [''],
});

我想观察每个控件的更改，并在发生这种情况时使用更新后的值运行一个函数：

getContacts(value: any) {
    this.phoneContacts.findContact(value).then(
        contacts => {
            // do something
        }
    );
}

现在，我正在为每个控件执行此操作，使用它bind来访问this组件的对象：

this.contactForm.get('name').valueChanges.subscribe(this.getContacts.bind(this));
this.contactForm.get('email').valueChanges.subscribe(this.getContacts.bind(this));
this.contactForm.get('phone').valueChanges.subscribe(this.getContacts.bind(this));

有什么方法可以观看更改并仅通过一次订阅获得更新的价值？我知道我可以直接订阅this.contact.form，但是我将获得所有控件作为值，而不仅仅是更新的控件。

如何获得以下函数的底线来设置类别表单字段的值？

ngOnInit() {
       this.findForm = this.formBuilder.group({
        categories: ['', [<any>Validators.required]],
        distanceNumber: ['', [<any>Validators.required]],
        distanceUnit: ['kilometers', [<any>Validators.required]],
        keywords: ['lemon', [<any>Validators.required]],
    });

    this.findForm.controls['categories'].updateValueAndValidity("shoe");
}

我创建了这个表单:

this.cardForm = this.fb.group({
    number: ['', Validators.compose([Validators.required, this.validateCardNumber])],
    holderName: ['', Validators.required],
    expiry: this.fb.group({
      expirationMonth: ['', Validators.required],
      expirationYear: ['', Validators.required],
    }),

如您所见,我创建了一个名为的嵌套表单组expiry.进入我的模板:

<form [formGroup]="cardForm" novalidate="novalidate" (ngSubmit)="onSave()">
  <div class="form-group">
    <label for="cardnumber">Card number</label>
    <input
        type="text"
        formControlName="number"
        placeholder="Card number"
        name="cardnumber"
        class="input-transparent form-control">
  </div>
  ...
  <div class="form-group" formGroupName="expiry">
    <label for="expirationmonth">Expiration month</label>
    <select2 id="default-select"
      name="expirationmonth"
      [data]="months$ | async"
      [width]="250"
      [options]="select2Options">
    </select2>

    <label for="expirationyear">Expiration year</label>
    <select2 id="default-select2"
      name="expirationyear"
      [data]="years$ | async"
      [width]="250"
      [options]="select2Options">
    </select2>
  </div>

我收到这个错误:

ERROR Error: formGroup expects a FormGroup instance. Please pass …

我使用angular 2中的模板表单验证实现了表单验证，而且我必须检查打字稿文件中的表单验证。我知道使用反应式表单验证的方式，但是我想使用模板形式。例如。

----输入脚本----

class CreateTourComponent extends MeteorComponent implements OnInit {
  ...
   onSubmit(evt){
     if(!myForm.isValid()){
       alert('not valid submission');
     }else{ 
     ... 
     } 
   }
  ...
}

----模板-----

<form class="package-form" #myForm="ngForm">

 <button (click) = "onSubmit(evt)" value='submit'></button>
</form>

模板形式有可能吗？

在打字稿上使用push方法时，我遇到问题，详细信息在这里
这是我的保留模态组件代码：

guestArray=[1, 2, 3, 4, 5, 6];
guests: number;
isDateTime: boolean = false;

constructor(private params: ModalDialogParams,
    private page: Page) {

        if(params.context === "guest") {
            this.isDateTime = false;
        }
        else if(params.context === "date-time") {
            this.isDateTime = true;
        }
}

ngOnInit() {

    if (this.isDateTime) {
        let datePicker: DatePicker = <DatePicker>this.page.getViewById<DatePicker>('datePicker');

        let currentdate: Date = new Date();
        datePicker.year = currentdate.getFullYear();
        datePicker.month = currentdate.getMonth() + 1;
        datePicker.day = currentdate.getDate();
        datePicker.minDate = currentdate;
        datePicker.maxDate = new Date(2045, 4, 12);

        let timePicker: TimePicker = <TimePicker>this.page.getViewById<TimePicker>('timePicker'); …

在我的表格中，我检查了姓名，并通过电子邮件验证了姓名

<input matInputrequired 
       minlength="3" 
       placeholder="Name" 
       ngModel   
       name="name" 
       #firstName="ngModel"
       [(ngModel)]="apiResult.name" 
       id="firstName">

并发送电子邮件给

<input matInput 
       placeholder="Email" 
       ngModel name="email" 
       maxlength="100" 
       #email="ngModel" 
       email 
       [(ngModel)]="apiResult.email" 
       id="email">

如果名称字段为空且少于3个字符。电子邮件不是必需的，但如果用户添加了电子邮件，则应采用电子邮件格式。如果成功，则仅启用提交按钮。

我有一个反应式表单，cancel必须将初始表单值再次设置到formGroup中。

import { Map } from "immutable";

@Input() data: any;

public ngOnInit() {
    if (this.data && this.data.controls) {
        this.group = this.fb.group({
            isActive: [this.data.isActive],
            items: this.fb.array(this.buildFormArray(this.data.controlPerformers)),
            });

        // Deep copy of the formGroup with ImmutableJs
        this.originalFormData = Map(this.group).toJS();
    }
}

 public buildFormArray(controllers: IControlPerformer[]) {
    return controllers.map((ctlr) => {
        return this.fb.group({
            user: [ctrl.userData],
            ctrlName: [ctlr.name, Validators.required],
            date: [moment(ctlr.date).toDate(), Validators.required],
        });
    });
}

public cancel() {
  const existingItems = this.group.get("items") as FormArray;
  while (existingItems.length) {
            existingItems.removeAt(0);
        }

        // Here the error …

我有一个角度路由,在其中一个组件中我有简单的登录表单,并在模板中提供formGroup,它显示上面的错误.

步骤:在app模块中导入ReactiveFormsModule.

在路由组件中:

app.routingmodule.ts

import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { LoginViewComponent } from './views/login/login.component';
import { HomeViewComponent } from './views/home/home.component';
import { CatalogViewComponent } from './views/catalog/catalog.component';

@NgModule({
  declarations: [ 
    LoginViewComponent, HomeViewComponent, CatalogViewComponent
  ],
  imports: [
    RouterModule.forRoot([
      { path: 'login', component: LoginViewComponent },
      { path: 'home', component: HomeViewComponent },
      { path: 'catalog', component: CatalogViewComponent },
      { path: '**', redirectTo: 'login' }
    ])
  ],
  exports: [
    RouterModule
  ],
  providers: [],

})
export class AppRoutingModule …