标签: angular2-forms

我一直在推迟从已弃用的表单api到@ angular/forms中的新表单api的升级.我刚刚升级到RC6,现在也想开始使用@ angular/forms.

此时文档非常稀缺,而且我很快陷入困境.

这就是我的工作表格:

<form [ngFormModel]="registrationForm" (ngSubmit)="register(registrationForm.value)">
    <fieldset class="form-group">
        <label for="email">Email address</label>
        <input type="email" class="form-control" id="email" placeholder="email" [ngFormControl]="registrationForm.controls['email']" maxlength="128" required>
    </fieldset>
    <div class="alert alert-warning" role="alert" *ngIf="registrationResponse && registrationResponse.EmailExists">
      This email account is already linked to an account! <a [routerLink]="['/user/logon']">Go here to login</a>.
    </div>
    <fieldset class="form-group">
        <label for="username">User name</label>
        <input type="text" class="form-control" id="username" placeholder="user name" [ngFormControl]="registrationForm.controls['username']" maxlength="32" required>
    </fieldset>
    <div class="alert alert-warning" role="alert" *ngIf="registrationResponse && registrationResponse.UsernameExists">
      This username is already taken! Please choose another one.
    </div>
    <div>
        <button type="submit" class="btn …

我刚刚启动Angular2并在向表单添加(ngSubmit)属性时面临以下错误

Template parse errors:
There is no directive with "exportAs" set to "ngForm" ("


    <form [ERROR ->]#form="ngForm" (ngSubmit)="onSubmit()" novalidate>

以下是我在package.json中的一些依赖项.

"dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/router": "3.0.0",
    "@angular/upgrade": "2.0.0",
    "angular2-in-memory-web-api": "0.0.20",
    "core-js": "^2.4.1",
    "ie-shim": "^0.1.0",
    "jquery": "^3.1.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "0.19.27",
    "zone.js": "^0.6.23"
  }

我跟随html表格.

<form #form="ngForm" (ngSubmit)="onSubmit()" novalidate>

    <div class="form-group">
        <label>Title</label>
        <input [(ngModel)]="model.Title" #title="ngModel" name="title" id="title" type="text" class="form-control" value="">
    </div>

    <div class="form-group">
        <label>Description</label>
        <textarea …

当我加载这个时,我想要将以前保存的值从本地存储器归因于此表单时,我会遇到与Ionic 2中内置的模型驱动表单相关的内容.

我设法使用Ionic的存储服务保存它,但是我没有将这些保存的数据归因于表单.我收到以下错误:

TypeError:设置只有getter的属性

这是我的代码,到目前为止:

import { Component } from '@angular/core';
import { Validators, FormBuilder, FormGroup } from '@angular/forms';
import { NavController, NavParams } from 'ionic-angular';
import { Storage } from '@ionic/storage';

@Component({
  selector: 'page-survey',
  templateUrl: 'survey.html',
  providers: [Storage]
})

export class Survey {
  form: FormGroup;
  networkStatus: boolean = true;

  constructor(public navCtrl: NavController, public navParams: NavParams,
              public formBuilder: FormBuilder, private storage: Storage) {

    // localstorage 
    this.storage = storage;

    this.form = formBuilder.group({
      "isPropertyOwner": ["", Validators.required],
      "familyMembers": ["", Validators.compose([Validators.required, Validators.minLength(0)])],
      "ownsProperty": ["", …

我正在处理大型表单,因此我计划将表单截断为多个子组件,这有助于轻松集成和维护.使用表单生成器我试图实现这一点.

mainform.html

    <form novalidate (ngSubmit)="onSubmit(formDetail);" [formGroup]="formDetail">
      <label>
        <span>Name</span>
          <input
          type="text"
          placeholder="Enter emp name"
          formControlName="name">
      </label>
      <app-userinfo></app-userinfo> <!-- Child component 1 -->
      <app-useracc></app-useracc> <!-- Child component 2 -->
    </form>

mainform.ts

export class MainformComponent implements OnInit {
  formDetail: FormGroup;
  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
      this.formDetail= this.formBuilder.group({
        name:'',
      userinfo: this.formBuilder.group({
        userid: '',
        userph: ''
      }),
      useracc: this.formBuilder.group({
        useracc: '',
        usertransfer: ''
      })
    });
  }
  onSubmit(value:User){
    debugger;
  }
}

CONSOLE.LOG

formControlName must be used with a parent formGroup directive.  You'll want to …

我是新手。我想创建一个自定义验证来检查文件大小和扩展名。我正在使用FormBuilder进行验证，并使用FileReader API来获取输入元素字段数据的文件名和大小。

问题：我们能够在变更事件上触发自定义验证，但无法获取输入类型字段的值。

请提出建议，我们如何实现角度2中文件扩展名和大小的自定义验证。

HTML：

<input type="file" [formControl] = "formName.controls['thumbnailImg']" (change)="changeThumbFile($event)">

零件：

//custom validation
function validateExt(c: FormControl) {
    let extension = ['png', 'jpeg', 'gif'];
    return extension.indexOf(c.value)? null : { validateExt: { valid: false } }
}

this.form = this.formBuilder.group({
  'thumbnailImg': ['', validateExt],
});
changeThumbFile($event){
    var file: File = $event.target.files[0];
    var fReader: FileReader = new FileReader();

    var imgName = file.name;
    this.thumbnailName = imgName;

    this.formGp.controls['thumbnailImg'].updateValueAndValidity();
}

有没有办法让form.reset()也重新将值form.submitted重置为false？这在我的情况下很烦人,因为我使用form.submitted作为条件来显示模板中的验证错误.这意味着在清除(重置)表单后会显示验证错误.

模板:

<form ... #f="ngForm" (ngSubmit)="f.form.valid && submitProduct(f)>
  <input type="text" name="productName" [(ngModel)]="product.name" #productName="ngModel" required>
  <div *ngIf="f.submitted && !productName.valid">Product name is required</div>
  <button type="submit" value="true" >Submit Request</button>
</form>

零件:

submitProduct(form: NgForm) {
    this.productService.createProduct(this.product).subscribe(data => {
        form.reset();
        // HERE annoyingly validation errors show up on empty form.
      }
    );
}

我已经FormGroup在angular2项目中实现了渲染形式，并且我已经使用formArray了嵌套数组数据

form.component.html

<div class="col-md-12" formArrayName="social_profiles">
  <div *ngFor="let social of resumeForm.controls.social_profiles.controls; let i=index" class="panel panel-default m-t-10">
    <div class="panel-heading" style="min-height: 30px;">
      <span class="glyphicon glyphicon-remove pull-right" *ngIf="resumeForm.controls.social_profiles.controls.length > 1" (click)="removeSocialProfiles(i)"></span>
    </div>
    <div class="panel-body" [formGroupName]="i">
      <social-profile [group]="resumeForm.controls.social_profiles.controls[i]"></social-profile>
    </div>
  </div>
</div>

form.component.ts

export class FormComponent implements OnInit {
    public resumeForm: FormGroup;

    constructor(private formBuilder: FormBuilder) {}

    ngOnInit() {
        this.resumeForm = this.formBuilder.group({
            name: ['', Validators.required],
            label: ['',],
            email: [''],
            phone: [''],  
            social_profiles: this.formBuilder.array([])
        });

        this.addSocialProfiles();
    }

    initSocialProfiles() {
        return this.formBuilder.group({
            network: [''],
            url: …

我有一个动态表单数组,如果我点击添加联系人按钮,它将添加动态表单字段后,我试图验证表单字段(validator.required,validator.pattern等...)和它的工作正常.

当我试图在html视图中显示以下错误消息时

<md-error *ngIf="myForm.controls.myContactArray.controls['name'].hasError('required')">
      Email is <strong>required</strong>
    </md-error>

得到以下错误消息

core.es5.js:1020 ERROR TypeError: Cannot read property 'hasError' of undefined
    at Object.eval [as updateDirectives] (RegisterComponent.ngfactory.js:453)
    at Object.updateDirectives (core.es5.js:12770)
    at checkAndUpdateView (core.es5.js:12288)
    at callViewAction (core.es5.js:12651)
    at execEmbeddedViewsAction (core.es5.js:12609)
    at checkAndUpdateView (core.es5.js:12289)
    at callViewAction (core.es5.js:12651)
    at execComponentViewsAction (core.es5.js:12583)
    at checkAndUpdateView (core.es5.js:12294)
    at callViewAction (core.es5.js:12651)

HTML

<div class="container-fluid">
  <md-card>
    <button (click)="addColumn()" md-raised-button>Add Contacts</button>
    <hr>
      <form  [formGroup] = "myForm" (ngSubmit) = "save(myForm.value)" class="contact-form">
        <div formArrayName="myContactArray">
          <div *ngFor="let myGroup of myForm.controls.myContactArray.controls; let rowIndex = index" >
            <div …

我已经通过模板驱动的表单实现了一个自定义表单控件，该表单控件将输入包装为html并添加了标签等。它与ngModel上的2way数据绑定可以很好地与表单进行对话。问题是，表单在初始化时会自动标记为脏的。有没有一种方法可以防止这种情况发生，因此我可以在表单上使用这些属性，它们将是准确的？

自定义选择器（除了自动标记为脏以外，此方法还可以正常工作）：

<form class="custom-wrapper" #searchForm="ngForm">
            {{searchForm.dirty}}
            {{test}}
            <custom-input name="testing" id="test" label="Hello" [(ngModel)]="test"></custom-input>
            <pre>{{ searchForm.value | json }}</pre>
</form>

自定义输入模板：

<div class="custom-wrapper col-xs-12">
    <div class="row input-row">
        <div class="col-xs-3 col-md-4 no-padding" *ngIf="!NoLabel">
            <label [innerText]="label" class="inputLabel"></label>
        </div>
        <div class="col-xs-9 col-md-8 no-padding">
            <input pInput name="cust-input" [(ngModel)]="value"  />
        </div>
    </div>
</div>

自定义输入组件：

import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
import { Component, Input, forwardRef } from "@angular/core";

@Component({
    selector: "custom-input",
    template: require("./custom-input.component.html"),
    providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() => QdxInputComponent),
            multi: true
        }
    ] …

我想在Angular2中悬停按钮时在顶部显示工具提示.

我们需要为此编写指令吗？

我不想为此使用Material UI.

寻找可重复使用的东西