标签: angular2-forms

我想要一个由标签和文本框组成的模板.此模板可以在我的页面中的不同位置重复使用.要做到这一点,我已经创建了一个MyTextComponent.我想知道如何将不同的值绑定到组件输入.

例如:

MyTextComponent

import {Component, Input} from 'angular2/core';
@Component({
    selector: 'myText',
    template:`<label>{{someLabel}}</label>
                 <input id=myId type="text" [(ngModel)]=bindModelData>
                 `
})
export class MyTextComponent {
    @Input() myId : string;
    @Input() bindModelData: any;
}

MyPageComponent

import {Component} from 'angular2/core';
import {MyTextComponent} from './MyTextComponent.component'

@Component({
    template:`<myText myId="id1" bindModelData="myString1"></myText>
              <myText myId="id2" bindModelData="myString2"></myText>
              `,
    directives:[MyTextComponent]
})
export class MyPageComponent{
    myString1: string;
    myString2: string;
}

如何将MyTextComponent输入的ngModel绑定到MyPageComponent局部变量？

编辑:添加@Output后尝试,但它没有工作:( MyPageComponent中的插值是空白的,以及日志打印未定义.但插值适用于mytextComponent.任何想法

import {Component} from 'angular2/core';
import {MyTextComponent} from './myText.component'

@Component({
    template:`<myText myId="id1" [(bindModelData)]="myString1"></myText>
              <myText myId="id2" [(bindModelData)]="myString2"></myText>
              {{myString1}}
              {{myString2}}

              <button (click)="clicked()">Click …

我需要从静态方法中访问我的自定义http服务,例如:

import {Control} from 'angular2/common';
import {HttpService} from './http.service';

class UsernameValidator {
    static usernameExist(control: Control): Promise<ValidationResult> { 
        ... /* Access my HTTPservice here */
    }
}

在这种情况下如何访问服务？

使用elvis-operator在Angular 2中使用双向绑定(syntax-sugar)的最佳方法是什么？我试过了

    <input [(ngModel)]="x?.y?.z"> 

但这不受支持.

有没有办法使用...... 像这样？

我的表单组代码是

this.myForm = this._fb.group({            
            branch_name: ['', [Validators.required]],
            branch_timing: this._fb.array([
                this.initBranchTiming(),
            ])                                
        });

initBranchTiming() {       
        return this._fb.group({
            day: ['', []],
            open_from: ['00:00:00', []],
            open_till: ['00:00:00', []]           
        });
  }

branch_name由此代码更新

(<FormControl>this.myForm.controls['branch_name']).updateValue(this.branch_detail.branch_name);

现在我必须更新表单数组的'day'字段.如何更新表格数组branch_timing的'day'字段？

存在ReactiveFormModule和FormsModule.

import {FormsModule, ReactiveFormsModule} from "@angular/forms";

我何时应该使用ReactiveFormModule以及与FormModule相比提供此模块的内容.

我尝试为选项添加默认值.它就像一种占位符,我用这种方法来做.在纯HTML中它可以工作,但如果我尝试使用*ngForangular 2属性,它不会选择任何东西.

这是我在纯HTML中使用的代码:

  <select name="select-html" id="select-html">
    <option value="0" selected disabled>Select Language</option>
    <option value="1">HTML</option>
    <option value="2">PHP</option>
    <option value="3">Javascript</option>
  </select>

并使用Angular模板:

 <select name="select" id="select" [(ngModel)]="selectLanguage">
    <option *ngFor="let item of selectOption" 
      [selected]="item.value==0" 
      [disabled]="item.value==0">{{item.label}}</option>
  </select>

这堂课是

import {Component} from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'app-form-select',
  templateUrl: 'default.component.html'
})
export class DefaultComponent {
  private selectOption: any;
  constructor() {
    this.selectOption = [
      {
        id: 1,
        label: "Select Language",
        value: 0
      }, {
        id: 2,
        label: "HTML 5",
        value: 1
      }, {
        id: …

它看起来像Angular2的FormGroup.patchValue()不会将新元素推送到数组中.

例如这样的事情:

ngOnInit() {

    this.form = this.formBuilder.group({
        animal: [''],
        school: this.formBuilder.group({
            name: [''],
        }),
        students: this.formBuilder.array([this.formBuilder.control('Bob')])
    });

    setTimeout(() => this.form.patchValue({
      animal: 'cat'
      school : {name: 'Fraser'},
      students: ['Bob gets edited', 'This will not show']
    }), 250);

}

只会更新 "学生"中的第一个元素,但不会插入第二个元素.

我需要做什么才能让它显示两个元素？

这里的人物.

我们正在开始一个新的Angular 2项目,并正在考虑是否使用Reactive Forms或Template Forms.背景阅读:https://angular.io/guide/reactive-forms

据我所知,Reactive Forms的最大优势在于它们是同步的,但我们有简单的形式,我不认为异步会导致我们的问题.Reactive似乎有更多的开销,表面上有更多代码可以做同样的事情.

有人可以提供一个可靠的用例,我会使用Reactive而不是更简单的模板表单吗？

我在Angular 4中创建了一个表单,允许用户单击表单中的ADD或REMOVE按钮向表单添加/删除字段.我使用ngFor从一个数组创建屏幕上的html输入(由add函数放大,或者由remove函数缩小).

在html模板中,我可以以formControlName ="control {{index}}"的形式添加formControlName,以确保每个新输入都有一个formcontrol.

但是,如何为这些输入动态添加和删​​除验证器？

这些文档陈述如下:

如果emitEvent为true,则此更改将导致FormControl上的valueChanges事件被发出.默认为true(因为它落到updateValueAndValidity).

这是什么updateValueAndValidity？