angular - Angular9 的反应形式和原子设计
问题描述
我正在我的 Angular 9 应用程序中实现原子设计。这意味着我将用原子、分子和有机体构建我的页面。一切都很好,除了 ReactiveFormsModule。
我想将其转换<input />
为自己的组件,这样我就不必一直复制关联的 HTML。但是,反应形式没有任何它。
下面的示例在加载时返回错误:ERROR Error: No value accessor for form control with name: 'field2'
我用完整的代码做了一个StackBlitz例子。
app.component.ts
import { Component } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
@Component({selector: 'app-root',templateUrl: './app.component.html'})
export class AppComponent {
form: FormGroup;
constructor(fb: FormBuilder) {
this.form = fb.group({
field1: ['value1', [Validators.required]],
field2: ['value2', [Validators.required]],
});
}
onSubmit() {console.log(this.form.value);}
}
app.component.html在这里我尝试用原子替换第二个输入。
<form [formGroup]="form" (ngSubmit)="onSubmit();">
<label>
Field 1 <input formControlName="field1" />
</label>
<label>
Field 2 <app-input formControlName="field2"></app-input>
</label>
<button type="submit">Submit</button>
</form>
输入组件.ts
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-input',
template: '<input [formControlName]="formControlName" />',
})
export class InputComponent implements OnInit {
@Input() formControlName: string;
constructor() { }
ngOnInit(): void {
}
}
我试图ControlValueAccessor
通过本教程实现 ,但这导致了奇怪的行为。
谁能告诉我如何实现这一目标?
解决方案
如果你想让你的生活变得轻松,那么使用 FormControl 作为你的自定义组件的输入,这是我的应用程序中的代码
// custom component
@Input() set control(value: FormControl) {
if (this._control !== value) {
this._control = value;
}
}
// tempalte
<input [formControl]="_control">
输入父控件我不使用 formBuilder 而是直接使用 fromControl 和 formGroup 。
name = new FormControl('');
constructor(){
let name = this.name;
this.formGroup = new FromGroup({name });
// template
<custom-control [control]="name">
将解决方案更新为问题中的示例:
app.component.ts
import { Component } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
@Component({selector: 'app-root',templateUrl: './app.component.html'})
export class AppComponent {
form: FormGroup;
constructor(fb: FormBuilder) {
this.form = fb.group({
field1: ['value1', [Validators.required]],
field2: ['value2', [Validators.required]],
});
}
onSubmit() {console.log(this.form.value);}
}
app.component.html
<form [formGroup]="form" (ngSubmit)="onSubmit();">
<label>
Field 1 <input formControlName="field1" />
</label>
<label>
Field 2 <app-input [control]="form.controls.field2"></app-input>
</label>
<button type="submit">Submit</button>
</form>
输入组件.ts
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-input',
template: '<input [formControl]="formControl" />',
})
export class InputComponent implements OnInit {
@Input() set control(value: FormControl) {
if (this.formControl !== value) {
this.formControl = value;
}
}
formControl: FormControl;
constructor() { }
ngOnInit(): void { }
}
推荐阅读
- angular - 如何保护所有禁用路由[CanDeactivate]?
- plugins - 自定义 Tensorboard 组件(运行选择器)
- erlang - 如何在 ERLANG / ELIXIR 中读取 UNC 路径
- javascript - 使用一个嵌套的对象数组映射一组对象
- reactjs - 反应动态导入()语法不起作用
- hibernate - 更新中的休眠锁定行
- javascript - 如何使用 CSS/Javascript 取消选择突出显示的列表项?
- java - 在 Oracle 11g 中执行 PL/SQL 块并在 Java 客户端中处理游标
- azure-aks - AKS 创建的服务主体密码到期
- python - 使用日历键盘 Python Telegram Bot 选择两个日期