Angular表单是数据输入控件的集合。将此标记用于与模板驱动和反应形式有关的问题,包括NgForm,FormGroup,FormControl,AbstractControl,FormBuilder和Validator,以及表单和组件之间的数据绑定。
Angular2 Reactive form.reset() 不清除自定义组件
在 Angular2RC5 我的应用程序中,我有一个 SSN 输入,其工作是在用户输入其 SSN(例如 123-34-3434)时添加破折号。我将其用作“反应形式”的一部分(那些不是 tem...
我正在使用 Eclipse 构建 Angular 应用程序(我的第一个应用程序),一开始我通过 New->Angular Project 创建我的项目(我安装了插件),但后来我被要求使用 Dy...
Angular - 没有将“exportAs”设置为“ngModel”的指令
以下是AngularJS项目中的文件。根据一些帖子的建议,我添加了: ngModel 名称 =“当前密码”#currentPassword =“ngModel” 在输入字段中,但仍然...
我正在使用表格 我正在使用表格 <form [formGroup]="form"> <input type="text" value={{userDetails.first_name}} formControlName = "firstName"> <button type="submit" data-action="save" (click)="onSubmit(form.value)"> </form> 这里 userDetails.first_name 值是 Tom。它在 UI 上的文本框内可见;但是当我提交表单时,form.firstName给了我空值。 要获取该值,您应该检查 form.value.firstName 而不是 form.firstName。 要更好地了解表单的结构,请在表单提交上执行 console.log(this.form)。 声明表单组: private userForm: FormGroup; 像这样初始化用户表单: userForm = form.group({ firstName: [firstName, [Validators.required]] }); 像这样在 HTML 中声明您的表单: <form class="example-form " [formGroup]="userForm" (ngSubmit)="onSubmit(userForm)"> <input type="text" value={{userDetails.firstName}} formControlName = "firstName"> <button type="submit" data-action="save"/> </form> 像这样创建你的 onSubmit() 方法: onSubmit({formValue, valid}: { formValue: UserDetails, valid: boolean }) { const firstName= value.firstName; } html <form [formGroup]="form"> <input type="text" formControlName="firstName"> <button type="submit" data-action="save" (click)="onSubmit(form.value)"> </form> 组件 你可以这样设置值 this.form.patchValue({firstName:this.userDetails.first_name}); 确保将表单 Group 的实例创建到组件中
在 angular2 中向 FormGroup 添加多个验证器
如何向 FormGroup 添加多个验证器。 FormControl 可以接受验证器数组,但 FormGroup 不能。除了创建单个自定义验证器之外,还有其他解决方法吗? ...
我在 Angular 4 中创建了一个表单,它允许用户单击表单中的 ADD 或 REMOVE 按钮来向表单添加/删除字段。我使用 ngFor 从 arr 在屏幕上创建 html 输入...
我正在创建一个网站,该网站的表单需要向外部支付提供商进行 POST 操作。但是,我需要检查组件的代码来检查用户是否首先经过身份验证。如果没有,我...
这些文档声明如下: 如果 emitEvent 为 true,则此更改将导致 valueChanges 事件 要发出的 FormControl。这默认为 true (当它下降时 到
我是 Angular 的新手。我如何开发 Angular 2/4 中的下拉建议搜索框。单击搜索按钮时,将使用下面的代码显示详细信息。但是我在输入文本时尝试...
没有 FormControl 实例附加到具有名称的表单控件元素
我在 Angular 2 中创建了一个表单,用户可以使用该表单编辑可以从列表中选择的 SearchProfile。最初一切正常,但是当我从
我正在尝试迭代组件中的 formArray 但出现以下错误 错误:找不到具有未指定名称属性的控件 这是我的班级文件中的逻辑...
可以订阅 NgForm 的 valueChanges 可观察属性的回调,以便对表单控件值的更改做出反应。 我需要以同样的方式做出反应......
如何使用 angular2 单击按钮获取 primeng 下拉列表的选定文本
我无法在单击按钮时获取 primeng 下拉列表的选定文本。 我使用 formgroup 来 div 并向网格添加多个条目。 我尝试了很多,但只得到了选定的值。我还需要下拉标签。
我在使用控件和选择框构建动态 Angular2 表单时遇到问题, 例如这个笨蛋: 我在使用控件和选择框构建动态 Angular2 表单时遇到问题, 例如这个plunker: <select class="form-control" ngControl="power"> <option *ngFor="#p of powers" [value]="p">{{p}}</option> </select> 您可以选择一个英雄的力量,并且控件将具有相同的值。但如果按 Change Powers,所选值将为空,但控制值仍为旧值。我认为这是一个严重的问题,因为当表单显示一件事但实际上它会提交不同的东西时,这是很多错误的根源,是否有某种方法可以更新控件的内容?有 updateValue(),但在所有这些情况下您都必须手动设置该值。 还有一个类似的情况,当你在表单构建后更新选择框选项时,它会在选择框中显示选定的值,而控件值将为空,关于如何处理这个问题有什么想法吗? 在 Angular 2 Final (RC5+) 中,有用于更新表单值的新 API。 patchValue() API方法支持部分表单更新,我们只需要指定部分字段即可: this.form.patchValue({id: selected.id}) 还有 setValue() API 方法,需要一个包含所有表单字段的对象。如果缺少一个字段,我们会收到错误。 更新 最新的 Angular2 语法更新将是这样的 this.form.controls['power'].setValue('anthing here'); 目前这是您唯一可以做的事情(如问题中提到的) this.form.controls['power'].updateValue(null); 有一个允许重置表单的开放问题https://github.com/angular/angular/issues/4933 还有一个拉取请求,但也允许您为每个控件“手动”操作,但也允许重置状态,如原始、触摸等...https://github.com/angular/angular/pull/ 6679 [Angular 2 稳定] 这是一种仅使用 NgModel 的肮脏方法(并且不导入其他表单构建器或表单组模块) // // set form field, "foo" value to "bar" // // // view // <form #formRef="ngForm"> <input name="foo" [(ngModel)]="foo"></input> </form> // // controller // class { @ViewChild('formRef') form: NgModel; ngAfterViewInit() { setTimeout(() => { this.form['controls']['foo'].setValue('bar'); }); } } 您可以尝试保持表单不可变。当您需要重置它时,只需重建它即可。这样可以确保它是最新的。您还可以将值存储在某处并将表单重置为这些值。假设您正在编辑一个项目,当您重置时,您可以恢复到原始值,而不仅仅是一个空表单... export class TheForm { public form: ControlGroup; public controls = (value: any = {}) => ({ 'id': [value.id], 'name': [value.name, Validators.required] }); constructor() { let values = some_values_from_database || {}; this.build(values); } build(value) { this.form = this._builder.group(this.controls(value)); } submit() { console.log(this.form.value); } } 我已经使用 @ngrx/store 创建了处理此类功能的基本表单,这是 the Gist。当我需要不同模型的表单时,我将扩展 BaseForm 并只定义 controls 和 submit() 方法,其余的都是继承... 代码是: (<FormControl>this.form.controls['power']).updateValue(data); 角 16: this.YOUR_FORM.controls.YOUR_FORM_CONTROL_NAME.setValue(NEW_VALUE) 示例: this.testForm.controls.username.setValue("bla bla");
我想知道是否有人可以帮助解释为什么我无法动态更改表单输入类型? 例如 没有
Mat-error 在实现 ControlValueAccessor 和 Validator 的自定义电话输入组件中未触发
我正在尝试通过在 Angular 中实现 ControlValueAccessor 和 Validator 来创建自定义电话输入组件,但我遇到了 mat-error 未触发的问题。 FormGroup 似乎有效,...
在reactive form中设置imge url在angular2+中出现错误。
我正在使用Angular应用程序,我已经成功地从数据库中获取了数据,并试图使用补丁值方法设置表单控件的值,但不幸的是,我得到了错误,即......。
现在,我正在尝试发出一个简单的帖子请求。这是<>