javascript - 将响应式(Reactive)表单与自定义输入等绑定(bind)

Question

我创建了一个自定义输入和其他通用元素那时我想将它绑定(bind)到 react 形式。现在我得到了 null 作为值。

HTML

<label for="name">
  <span>{{title}}</span>
  <input type="text" name="name" formControlName="name">
</label>

组件

export class AppInputComponent implements OnInit {
  @Input() name: string;
  @Input() title?: string;
  @Input() form: FormGroup;
  @Input() options?: Array<string>;

  constructor() { }

  ngOnInit() {
  }

}

这个有自己的模块文件

@NgModule({
  declarations: [
    GFormsFields.AppTextboxComponent,
    GFormsFields.AppSelectComponent,
    GFormsFields.AppInputComponent,
    GFormsFields.AppCheckboxComponent
  ],
  imports: [
    CommonModule,
    BrowserModule,
  ],
  exports: [
    GFormsFields.AppTextboxComponent,
    GFormsFields.AppSelectComponent,
    GFormsFields.AppInputComponent,
    GFormsFields.AppCheckboxComponent
  ],
  providers: [],
  bootstrap: []
})

现在我想将它绑定(bind)到我创建 react 表单的位置。

HTML

<form [formGroup]="reactiveForms" (ngSubmit)="onSubmit()">

  <app-app-input [title]="'First Name Dude'" [name]="'firstName'" [form]="'form'"></app-app-input>

  <button type="submit" [disabled]="!reactiveForms.valid">Submit</button>

</form>

组件

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  reactiveForms = new FormGroup({
    name: new FormControl
  });

  onSubmit(): void {
    console.log(this.reactiveForms);
  }
}

如何从此自定义输入传递到应用程序(作为测试目的。这将嵌套在其他组件中)。

我做错了什么？

Answer 1

像这样更改AppInputComponent.html:

<label for="name">
 <span>{{title}}</span>
 <input type="text" name="name" [formControl]="form.controls.name">
</label>

并使用这样的组件:

<app-app-input [title]="'First Name Dude'" [name]="'firstName'" [form]="reactiveForms"></app-app-input>

=================================

通过上述更改，您的问题将得到解决，但我建议您进行额外的更改以获得更好的设计。

像这样更改AppInputComponent.ts:

export class AppInputComponent implements OnInit {
  @Input() name: string;
  @Input() title?: string;
  @Input() nameControl: FormControl;
  @Input() options?: Array<string>;

  constructor() { }

  ngOnInit() {
  }

}

像这样更改AppInputComponent.html:

<label for="name">
  <span>{{title}}</span>
  <input type="text" name="name" [formControl]="nameControl">
</label>

最后像这样使用它:

<app-app-input [title]="'First Name Dude'" [name]="'firstName'" [nameControl]="reactiveForms.controls.name"></app-app-input>

AppInputComponent 仅需要“名称”的 FormControl 而不是整个 FormGroup 。所以传递整个 FormGroup 并不是一个好的设计。