Question

我创建了一个自定义输入和其他通用元素在那一点上，我想将其绑定到反应形式。现在我得到了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: []
})

现在我想将其绑定到创建反应形式的地方。

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并不是一个好的设计。

将反应形式与自定义输入等绑定

1 个答案: