标签: angular2-forms

我正在使用Material 2来添加md-raised-button.

我想仅在某些条件成立时应用此指令.

例如:

<button md-raised-button="true"></button>

另一个例子:我在plunker中创建了一个基本的动态反应形式.我正在使用formArrayName反应形式的指令来控制数组.我想formArrayName仅在特定条件成立时才应用指令.否则不添加formArrayName指令.我尝试和研究了很多,但可以找到任何解决方案.

这是plunker链接:https://plnkr.co/edit/oPZ7PyBSf8jjYa2KVh4J ? p = preview

我真的很感激任何贡献.

提前致谢!

鉴于绑定到同一个复选框列表formControlName,我怎么能产生必然的复选框值的数组formControl,而不是简单true/ false？

例:

<form [formGroup]="checkboxGroup">
    <input type="checkbox" id="checkbox-1" value="value-1" formControlName="myValues" />
    <input type="checkbox" id="checkbox-2" value="value-2" formControlName="myValues" />
    <input type="checkbox" id="checkbox-3" value="value-2" formControlName="myValues" />
</form>

checkboxGroup.controls['myValues'].value 目前生产:

true or false

我想要它产生什么:

['value-1', 'value-2', ...]

我正在使用ReactiveFormsModuleAngular2来创建包含表单的组件.这是我的代码:

foo.component.ts:

constructor(fb: FormBuilder) {
    this.myForm = fb.group({
        'fullname': ['', Validators.required],
        'gender': []
    });
}

foo.component.html(with [formControl]):

<div class="fields">
    <div class="field">
        <label>Fullname*</label>
        <input type="text" [formControl]="myForm.controls.fullname"/>
    </div>
</div>

<div class="inline fields">
    <label for="gender">Gender</label>
    <div class="field">
        <div class="ui radio checkbox">
            <input type="radio" name="gender" checked="" tabindex="0" class="hidden" [formControl]="myForm.controls.gender">
            <label>Male</label>
        </div>
    </div>
    <div class="field">
        <div class="ui radio checkbox">
            <input type="radio" name="gender" tabindex="0" class="hidden" [formControl]="myForm.controls.gender">
            <label>Female</label>
        </div>
    </div>
</div>

foo.component.html(with formControlName):

<div class="fields">
    <div class="field">
        <label>Fullname*</label>
        <input type="text" …

我试图以编程方式触发元素上的click事件(或任何其他事件),换句话说,我想知道angular2中jQuery .trigger()方法提供的类似功能.

有没有内置的方法来做到这一点？.....如果没有请建议我该怎么做

请考虑以下代码片段

<form [ngFormModel]="imgUploadFrm"
          (ngSubmit)="onSubmit(imgUploadFrm)">
        <br>
        <div class="input-field">
            <input type="file" id="imgFile" (click)="onChange($event)" >
        </div>
        <button id="btnAdd" type="submit" (click)="showImageBrowseDlg()" )>Add Picture</button>
 </form>

当用户点击btnAdd时,它应该触发imgFile上的click事件

所以我有一个复杂的形式来创建一个实体,我想用它来编辑我也使用新的角形式API.我将表单的结构与从数据库中检索的数据完全相同,因此我想将整个表单的值设置为此处检索的数据,这是我想要做的示例:

this.form = builder.group({
      b : [ "", Validators.required ],
      c : [ "", Validators.required ],
      d : [ "" ],
      e : [ [] ],
      f : [ "" ]
    });
this.form.value({b:"data",c:"data",d:"data",e:["data1","data2"],f:data});

PS:NgModel不能用于新的表单api我也不介意在模板中使用单向数据绑定

<input formControlName="d" value="[data.d]" />

这有效,但在数组的情况下会很痛苦

我试图迭代我的​​组件中的formArray但我得到以下错误

Error: Cannot find control with unspecified name attribute

这是我的类文件中的逻辑

export class AreasFormComponent implements OnInit {
    public initialState: any;
    public areasForm: FormGroup;

    constructor(private fb: FormBuilder) { }

    private area(): any {
      return this.fb.group({
          name: ['', [Validators.required]],
          latLong: ['', [Validators.required]],
          details: ['', [Validators.required]]
      });
    }

    public ngOnInit(): void {
        this.areasForm = this.fb.group({
            name: ['', [Validators.required]],
            areas: this.fb.array([this.area()])
        });
    }
}

和我的模板文件

<form class="areas-form" [formGroup]="areasForm" (ngSubmit)="onSubmit(areasForm.values)">
    <md-input-container class="full-width">
        <input mdInput placeholder="Location Name" type="text" formControlName="name" required>
        <md-error *ngIf="areasForm.get('name').hasError('required')">Please enter the locationName</md-error>
    </md-input-container>
    <md-grid-list …

我正在开发Angular2(Beta 8)中的一个组件.该组件有一个文本框和一个下拉列表.我想在加载组件时或在下拉列表的更改事件中将焦点设置在文本框中.我如何在angular2中实现这一目标.以下是组件的Html.

<div>
    <form role="form" class="form-horizontal ">        
        <div [ngClass]="{showElement:IsEditMode, hidden:!IsEditMode}">
            <div class="form-group">
                <label class="control-label col-md-1 col-sm-1" for="name">Name</label>
                <div class="col-md-7 col-sm-7">
                    <input id="name" type="text" [(ngModel)]="person.Name" class="form-control" />

                </div>
                <div class="col-md-2 col-sm-2">
                    <input type="button" value="Add" (click)="AddPerson()" class="btn btn-primary" />
                </div>
            </div>
        </div>
        <div [ngClass]="{showElement:!IsEditMode, hidden:IsEditMode}">
            <div class="form-group">
                <label class="control-label col-md-1 col-sm-1" for="name">Person</label>
                <div class="col-md-7 col-sm-7">
                    <select [(ngModel)]="SelectedPerson.Id"  (change)="PersonSelected($event.target.value)" class="form-control">
                        <option *ngFor="#item of PeopleList" value="{{item.Id}}">{{item.Name}}</option>
                    </select>
                </div>
            </div>
        </div>        
    </form>
</div>

我有这个枚举(我正在使用TypeScript):

export enum CountryCodeEnum {
    France = 1,
    Belgium = 2
}

我想在我的表单中构建一个select,每个选项的枚举整数值为value,枚举文本为label,如下所示:

<select>
     <option value="1">France</option>
     <option value="2">Belgium</option>
</select>

我怎样才能做到这一点 ？

FormGroup:

FormGroup将每个子FormControl的值聚合到一个对象中,每个控件名称作为键.

const form = new FormGroup({
  first: new FormControl('Nancy', Validators.minLength(2)),
  last: new FormControl('Drew'),
});

Run Code Online (Sandbox Code Playgroud)

FormArray:

FormArray将每个子FormControl的值聚合到一个数组中.

const arr = new FormArray([
  new FormControl('Nancy', Validators.minLength(2)),
  new FormControl('Drew'),
]);

Run Code Online (Sandbox Code Playgroud)

应该何时使用另一个？

升级到RC5后,我们开始收到此错误:

ngModel cannot be used to register form controls with a parent formGroup directive.  Try using
  formGroup's partner directive "formControlName" instead.  Example:


<div [formGroup]="myGroup">
  <input formControlName="firstName">
</div>

In your class:

this.myGroup = new FormGroup({
   firstName: new FormControl()
});

  Or, if you'd like to avoid registering this form control, indicate that it's standalone in ngModelOptions:

  Example:


<div [formGroup]="myGroup">
   <input formControlName="firstName">
   <input [(ngModel)]="showMoreControls" [ngModelOptions]="{standalone: true}">
</div>

看起来在RC5中两者不能再一起使用,但我找不到替代解决方案.

以下是产生异常的组件:

<select class="field form-control" [formGroup]="form" [(ngModel)]="cause.id" [name]="name">
<option *ngFor="let c of causes" [value]="c.text">{{c.text}}</option>
</select>