Javascript 使用自定义输入等绑定被动表单

我创建一个自定义输入和其他通用元素 在这一点上，我想把它绑定到反应形式。现在我得到

null

作为值

HTML

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

<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>

现在我想把它绑定到我创建反应形式的地方

HTML

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

<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>

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

---

我做错了什么？

如下更改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>

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

  constructor() { }

  ngOnInit() {
  }

}

<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>

{{title}}

并使用如下组件：

<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>

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

  constructor() { }

  ngOnInit() {
  }

}

<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.ts如下：

<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>

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

  constructor() { }

  ngOnInit() {
  }

}

<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实现OnInit{
@Input（）名称：string；
@输入（）标题？：字符串；
@Input（）nameControl:FormControl；
@输入（）选项？：数组；
构造函数（）{}
恩戈尼尼特（）{
}
}

---

更改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>

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

  constructor() { }

  ngOnInit() {
  }

}

<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>

{{title}}

最后像这样使用它：

<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>

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

  constructor() { }

  ngOnInit() {
  }

}

<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只需要“name”的FormControl，不需要整个FormGroup。因此，传递整个FormGroup不是一个好的设计