Questions tagged «angular2-forms»

因此，我有一个用于创建实体的复杂表格，我也想将其用于编辑，我正在使用新的角度表格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]" /> 那行得通，但在数组的情况下会很痛苦

91 angular  angular2-forms 

升级到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 …

89 angular  angular2-forms  angular2-formbuilder 

我有一些带有模板的简单angular 2组件。提交后如何清除表格和所有字段？我无法重新加载页面。设置数据后，date.setValue('')字段为stil touched。 import {Component} from 'angular2/core'; import {FORM_DIRECTIVES, FormBuilder, ControlGroup, Validators, Control} from 'angular2/common'; @Component({ selector: 'loading-form', templateUrl: 'app/loadings/loading-form.component.html', directives: [FORM_DIRECTIVES] }) export class LoadingFormComponent { private form:ControlGroup; private date:Control; private capacity:Control; constructor(private _loadingsService:LoadingsService, fb:FormBuilder) { this.date = new Control('', Validators.required); this.capacity = new Control('', Validators.required); this.form = fb.group({ …

87 angular  angular2-forms 

我在formbuilder中有一个表单数组，并且我正在动态更改表单，即在单击加载来自应用程序1等的数据时。 我遇到的问题是，所有数据都已加载，但formarray中的数据仍然保留，只是将旧项与新项合并。 我如何清除该formarray仅包含新项目。 我已经试过了 const control2 = <FormArray>this.registerForm.controls['other_Partners']; control2.setValue([]); 但这不起作用。 有任何想法吗？谢谢 在nginit中 ngOnInit(): void { this.route.params.subscribe(params => { alert(params['id']); if (params['id']) { this.id = Number.parseInt(params['id']); } else { this.id = null;} }); if (this.id != null && this.id != NaN) { alert(this.id); this.editApplication(); this.getApplication(this.id); } else { this.newApplication(); } } …

86 angular  angular2-forms 

我无法找出如何将所有表单字段都标记为已触摸。主要问题是，如果我不触摸字段并尝试提交表单-验证错误未显示。我的控制器中有这段代码的占位符。 我的想法很简单： 用户点击提交按钮 所有字段都标记为已触摸 错误格式化程序重新运行并显示验证错误 如果有人有其他想法如何在提交时显示错误而不执行新方法，请与他人分享。谢谢！ 我的简化形式： <form class="form-horizontal" [formGroup]="form" (ngSubmit)="onSubmit(form.value)"> <input type="text" id="title" class="form-control" formControlName="title"> <span class="help-block" *ngIf="formErrors.title">{{ formErrors.title }}</span> <button>Submit</button> </form> 而我的控制器： import {Component, OnInit} from '@angular/core'; import {FormGroup, FormBuilder, Validators} from '@angular/forms'; @Component({ selector : 'pastebin-root', templateUrl: './app.component.html', styleUrls : ['./app.component.css'] }) export class AppComponent implements OnInit …

82 angular  angular-reactive-forms  angular2-forms  angular2-formbuilder 

我试图以编程方式在元素上触发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事件

81 angular  angular2-forms 

我正在开发Angular2（测试版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 …

78 angular  angular2-template  angular2-forms 

我有这个枚举（我正在使用TypeScript）： export enum CountryCodeEnum { France = 1, Belgium = 2 } 我想在表单中构建一个select，对于每个选项，将枚举整数值作为value，并将枚举文本作为label，如下所示： <select> <option value="1">France</option> <option value="2">Belgium</option> </select> 我怎样才能做到这一点 ？

77 typescript  angular  angular2-forms 

我有使用模板驱动的蓝图的表单，所以像这样： <form #myForm="ngForm" ngSubmit="save(myForm.value, myForm.isValid)"> <input #name="ngModel" [(ngModel)]="name"> <button type="submit">Submit form</button> </form> 现在，如何防止ENTER提交表单？它会干扰表单内部的自定义ENTER行为，并且还会干扰您在输入中无意按Enter的情况，这是不必要的。 我环顾四周，找到了一些旧的Angular 1答案以及一些标准的JavaScript答案，但是我觉得Angular 2必须已经内置了类似的东西，但我找不到。 如果没有，实现此目标的最佳方法是什么？

76 angular  angular2-forms