angular - 从可重用组件到父组件的角度绑定

Question

我最近将我的输入字段移至自定义可重用组件，以全球化某些组件架构。我来自 React 背景，所以我在 Angular 做的事情上有点挣扎。

我在这里卡住了一些东西。我正在将道具传递给父级，并且我可以使用该组件，但我无法再读取该字段的值。在可重用组件中使用 formControlName 会破坏 UI 并引发一些 writeValue 错误。

core.js:6150 错误类型错误：无法在 NgModel 的 NgModel._setUpControl (forms.js:5235)的 FormGroupDirective.addControl (forms.js:5699)的 setUpControl
(forms.js:2380)读取属性“writeValue” 。 ngOnChanges (forms.js:5195) 在 NgModel.rememberChangeHistoryAndInvokeOnChangesHook (core.js:1506) 在 callHook (core.js:2525) 在 callHooks (core.js:2492) 在 executeInitAndCheckHooks (core.js:2443) 在 selectIndexInternal (core .js:8389) 在 Module.ɵɵadvance (core.js:8372)

还有这个错误

core.js:6150 错误类型错误：无法 在 FormControlName.rememberChangeHistoryAndInvokeOnChangesHook (core.js:1506) 的 FormControlName.ngOnChanges (forms.js:6219)的 FormControlName._setUpControl
(forms.js:6274)读取属性“addControl” callHook (core.js:2525) 在 callHooks (core.js:2492) 在 executeInitAndCheckHooks (core.js:2443) 在 refreshView (core.js:9422) 在 refreshComponent (core.js:10573) 在 refreshChildComponents (core.js :9204) 在 refreshView (core.js:9457)

这就是我所拥有的

input.field.component.html

<input
   [type]="type"
   class="form-control"
   [id]="name"
   [name]="name" 
   placeholder="{{placeholder}}"
   ngModel
   required="{{required}}"> 

input.field.component.ts

  import { Component, OnInit, Input } from '@angular/core';

    @Component({
      selector: 'input-field',
      templateUrl: './input-field.component.html',
      styleUrls: ['./input-field.component.scss']
    })
    export class InputFieldComponent implements OnInit {

      @Input() name: string;
      @Input() placeholder: string = "";
      @Input() type: string = "text";
      @Input() label: string;
      @Input() required: boolean;
      @Input() OnlyNumbers: boolean;


      constructor() { }

      ngOnInit(): void {
      }

    }

parent.component.html - 我使用了 formControlName、[(ngModel)] 和 [ngModel] 无济于事

<input-field
   [OnlyNumbers]="true" 
   [name]="'totalMembership'"
   formControlName="totalMembership"
   [label]="'Total membership of local union'"
   required="true">
   </input-field>
   ...
   ... 
   ...

   <!-- somewhere below I am supposed to bind the value to a string -->       
   <p>Total membership #: {{totalMembership}}</p>

父组件.ts

  import { Component, OnInit } from '@angular/core';
  import { FormBuilder, FormGroup, Validators } from '@angular/forms';
  import { DatePipe } from '@angular/common';
  import * as moment from 'moment';

  @Component({
    selector: 'app-strike-lockout-benefit-app',
    templateUrl: './strike-lockout-benefit-app.component.html',
    styleUrls: ['./strike-lockout-benefit-app.component.scss'],
    providers: [DatePipe]
  })
  export class StrikeLockoutBenefitAppComponent implements OnInit {
    uanetform: FormGroup;

    countryselected;
    public formInvalid: boolean;

    totalMembership = null

    constructor( private fb: FormBuilder, private datePipe: DatePipe ) { }

    ngOnInit() {    
      this.uanetform = this.fb.group({
        totalMembership: [null, [Validators.required]],
      }); 
    }
  }

这很长，因为我想确保读者获得尽可能多的信息。我真的不能把他放在 Plunkr 上，因为它需要很多依赖项和指令。

我只需要能够捕获值或用户输入的任何内容。

标签： angular