Angular9 的反应形式和原子设计

Question

我正在 Angular 9 应用程序中实施 atomic design。这意味着我将用原子、分子和有机体来构建我的页面。一切正常，除了 ReactiveFormsModule。

我想将 <input /> 转换为它自己的组件，这样我就不必一直复制关联的 HTML。但是，反应形式没有任何它。

下面的示例是 returns 加载错误：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>

input.component.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 {
  }

}

我试图通过 this tutorial 实现 ControlValueAccessor，但这导致了奇怪的行为。

任何人都可以告诉我如何实现这个吗？

Answer 1

如果你想让你的生活更轻松，那么使用 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>

input.component.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 { }
}

Angular9 的反应形式和原子设计

Angular9's reactive forms & atomic design

atomic-design

angular

angular-reactive-forms

问题示例的更新解决方案：