标签: angular2-forms

我在Angular2中定义了一个表单:

    this.form = this._formBuilder.group({
        password: ['',Validators.required],
        passwordRepeat: ['',Validators.required]
    });

哪里

public form:ControlGroup

哪个好,如:

 _formBuilder = FormBuilder.group(controlsConfig: {
        [key: string]: any;
    }, extra?: {
        [key: string]: any;
    }): modelModule.ControlGroup

它返回ControlGroup.

现在,在我使用的组件中:

this.user.password = this.passwordEditForm.controls.password.value;

这引发了我的编译错误:

error TS2339: Property 'password' does not exist on type '{ [key: string]: AbstractControl; }'.

好像是一个bug.关于如何克服这个问题的任何想法？我试过这样做:

export interface FormControlGroup extends ControlGroup{
password:any;
}

但这给了我更多的错误:

error TS1206: Decorators are not valid here.
app/form.component.ts(30,9): error TS2322: Type 'ControlGroup' is not assignable to type 'FormControlGroup'.
  Property 'password' is …

[注意]这个问题仅仅是为了帮助其他谷歌这个错误的人,我自己也加了我的答案.我把问题格式化得很糟糕,因为我不想/希望得到任何答案.当我选择"回答你自己的问题,Q/A风格"时,想到SO会用标签或smtn标记我的问题 - .-

我正在搞乱制作表单,我收到此错误消息:

意外字符"EOF"("

谷歌给了我几个结果,但没有一个非常有用.这个问题困扰了我很多年.

  <div class="form-group">
    <label for="details">Details</label>
    <textarea formControlName="details" class="form-control" id="details" placeholder="Full details on your report"> <textarea>
  </div>

  <div class="form-group">
    <label for="suggested_solution">Suggested Solution</label>
    <textarea formControlName="suggested_solution" class="form-control" id="suggested_solution" placeholder="Your suggestion for a solution"></textarea>
  </div>

  <div class="form-group">
    <label for="attachments">Relevant attachments</label>
    <input formControlName="attachments" type="file" class="form-control" id="attachments">
  </div>

  <button type="submit" class="btn btn-primary" [disabled]="!form.valid">Submit</button>
</form>

我在一个页面上有一个带有2个输入框的表单,当我单击提交时,路由器导航到另一个页面,其中包含2个输入框和一个提交按钮.

到目前为止,我已设法将查询参数传递到第二页并预填充输入框.

问题是,当我点击第2页的提交按钮时,输入框中的值不会被提交.如果我"触摸"框并输入其他内容,则提交工作正常并且正在提交编辑的值.

第一页(我将剩下的代码遗漏,这部分工作正常)

this._router.navigate(['/dashboard/test/new'], 
{ queryParams: {'name': this.name.value , 'lastname':this.lastname.value}});

第2页

private subscription: Subscription
paramName: string;
paramLastName: string

this.subscription = this.activatedRoute.queryParams.subscribe(
  params => {
    this.paramName     = params['name'];
    this.paramLastName = params['lastname'];
  }
)

这是html:

<form [formGroup]="myFormTest" (ngSubmit)="onSubmitNew()" class="onl_loginForm" novalidate>
      <div class="form-group">
        <label for="name" class="control-label">Name </label>
        <input type="text" formControlName="name" class="form-control" id="name"  value="{{paramName}}" required>
      </div>
      <div class="form-group">
        <label for="lastname" class="control-label">Last Name </label>
        <input type="text" formControlName="lastName" class="form-control" id="lastname" value="{{paramLastName}}" required>
      </div>
<button type="submit" class="btn-save">Submit</button>
</form>

如何强制表单"读取"两个输入字段值而不触及它们？

我已经创建了自定义验证器(cannotContainSpace)并想要使用它模板组件(postmessage.component),但不知何故验证器无法看到我创建的自定义验证器类..这里是编译器消息:

usernamevalidator.ts

import {FormControl} from '@angular/forms';

export class UsernameValidator{
    static cannotContainSpace(control:FormControl){
        if(control.value.indexOf('')>=0)
            return {    cannotContainSpace:true };
        return null;
    }
}

postmessage.component.ts

import { Component } from '@angular/core';
import {FormControl,FormGroup,FormBuilder,Validators} from '@angular/forms';
import {UsernameValidator} from '../../validators/usernamevalidator';

@Component({
    moduleId:module.id,
    selector: 'post-message',
    templateUrl: '../../templates/postmessage.component.html'
})
export class PostComponent {
    form : FormGroup;
    constructor(fb:FormBuilder){
        this.form = fb.group({
            username:['', Validators.compose([Validators.required, Validators.cannotContainSpace])],            
            email:['', Validators.required],         
            message:['', Validators.required]         
        });
    }
    signup(){
        console.log(this.form.value);
    }
 }

我正在使用model driven forms,我正在寻找一种更好的方法将数据绑定到相关的,formControlName因为我的表单上有超过25个字段,我不想为所有字段编写代码,因为我已经写了对于下面.

模板:

<input type="text"
       class="form-control"
       formControlName="firstName"
       name="firstName"
       placeholder="First Name"
       required>

组件:

this.refferalService.getReferringDataEdit(id).subscribe(
  result => {
    this.referringData = result.responseObject;
    this.refferalForm.patchValue({ 
      firstName: this.referringData.firstName 
    })
  }
)

有没有办法"自动"？

我正在制作一个网站，该网站的表单需要对外部付款提供商进行POST。但是，我需要检查组件的代码以检查用户是否首先经过身份验证。如果没有，我需要通过我的webapi来更新值。收到响应后，我可以继续对外部URL进行POST。我的代码如下所示：

 onSubmit(form: any): void {  
         //for anonymous orders, we need to store the email before we send the form
         if(this.loggedIn){
            form.submit(); 
         }
         else{
             this.cartService.updateUserEmail(this.cart.id, this.email)
                             .subscribe(() => form.submit())
         }
  }

如果this.loggedIn为true，则POST可以正常工作。仅当我需要调用cartService时，form.submit才起作用。有时，控制台显示错误，“对象不包含方法commit（）”，有时，控制台中什么也没得到...。

这是开幕表格标记：

<form #cartForm="ngForm" (ngSubmit)="onSubmit(cartForm)" method="post" [action]="cart.paymentUrl" >

任何帮助，将不胜感激。

编辑 这是我的提交按钮的标记，根据要求：

<button type="submit">CHECKOUT</button>

即时通讯制作移动应用.在我的登录表单中,我有2个TextFields

<TextField hint="Email Address" keyboardType="email" [(ngModel)]="email" autocorrect="false" autocapitalizationType="none"></TextField>
<TextField hint="Password" secure="true" [(ngModel)]="password"></TextField>
 <Label [text]="email"></Label>

在component.ts中

import { Component, OnInit } from '@angular/core';
import { Router } from "@angular/router";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { Page } from "ui/page";
import * as Toast from 'nativescript-toast';
@Component({
    moduleId: module.id,
    selector: 'sign-in',
    templateUrl: "template.html"
})
export class SignInPage implements OnInit {
    email: string ="example";
    password: string;
    constructor(private router: Router, page: Page) {
        page.actionBarHidden = true;
    }
    ngOnInit() {

        var loginParams = …

当我提交表格时,我有这个功能

login(form: NgForm)

如果我尝试以下

console.log(form.value.password); // this works perfect.

但这不起作用

form.value.password = ''

登录失败后,我想重置密码字段.

我是新手，Angular2似乎无法在任何地方找到我的答案。我有一个input（如下所示），但我只希望它允许以下操作：

• AZ
• z
• '
• --
• [空间]

我不知道该怎么做。我已经试过ng-pattern="/^[a-zA-Z\s]*$/"，pattern="/^[a-zA-Z\s]*$/"和ng-pattern-restrict="/^[a-zA-Z\s]*$/"。

的HTML

<td>
    <md-input-container>
        <input mdInput [(ngModel)]="details.firstName" placeholder="First name(s)" ng-pattern="/^[a-zA-Z\s]*$/">
    </md-input-container>
</td>

理想情况下，如果用户输入数字字符，我希望以太坊希望自己将其删除或只允许其在字段中显示（不显示）

创建模型驱动的表单时，出现错误：错误：formControlName必须与父formGroup指令一起使用。您将要添加一个formGroup指令并将其传递给现有的FormGroup实例（您可以在类中创建一个）。

请告诉我这段代码出了什么问题。

app.component.html

<div class="col-md-6">
  <form  (ngSubmit)="saveSession(newSessionForm.value)" autocomplete="off">
    <div class="form-group">
      <label for="sessionName">Session Name:</label>
      <input formControlName="name" id="sessionName" type="text" class="form-control" placeholder="session name..." />
    </div>
    <div class="form-group">
      <label for="abstract">Abstract:</label>
      <textarea formControlName="abstract" id="abstract" rows=3 class="form-control" placeholder="abstract..."></textarea>
    </div>
    <button type="submit" class="btn btn-primary">Save</button>
  </form>
</div>

app.component.ts

export class CreateSession {

    newSessionForm:FormGroup;
    abstract : FormControl;
    name : FormControl;

    ngOInInit(){
        this.name = new FormControl('', Validators.required)
        this.abstract = new FormControl('', Validators.required)

        this.newSessionForm = new FormGroup({
            name:this.name,
            abstract: this.abstract
        })         
    }


    saveSession(formValues){
        console.log(formValues);
    }