Question

使用angular 7和Bootstrap 4，我想将bootstrap 4输入包装在一个自定义组件中，以减少模板中的样板。

我希望最终的主要组件如下所示：

<form [formGroup]="myForm" (submit)="submit(myForm.value)">

    <app-form-control label="Lastname" placeholder="Lastname" formControlName="lastName"></app-form-control>
    <app-form-control label="Firstname" placeholder="Firstname" formControlName="firstName"></app-form-control>

    <button class="pull-right" type="submit">
        SUBMIT
    </button>
    <button (click)="reset()">
        RESET
    </button>
</form>

我的formGroup是这样创建的：

public createFormGroup() {
    return this.fb.group({
        firstName: [null, Validators.required],
        lastName: [null, Validators.required],
    });
}

app-form-control模板应如下所示：

<div class="form-group row">
  <label class="col-2 col-form-label">{{label}}</label>
  <div class="col-10">
    <input class="form-control" placeholder="{{placeholder}}" [formControlName]="formControlName" autocomplete="nope"/>
  </div>
</div>

但是我不知道如何编写组件（在TypeScript中）。如何将外部formControlName属性绑定到内部输入字段？如何进行验证？

Answer 1

您可以通过实现ControlValueAccessor来实现。让我们通过构建TextBoxComponent来逐步进行操作。

步骤1：为文本字段创建NG_VALUE_ACCESSOR为TEXTBOX_VALUE_ACCESSOR。

const TEXTBOX_VALUE_ACCESSOR = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => TextBoxComponent),
  multi: true,
};

步骤2：将ControlValueAccessor应用于我们的组件TextBoxComponent。

export class TextBoxComponent implements ControlValueAccessor{
...
...
}

步骤3：定义ControlValueAccessor的未实现方法。 TextBoxComponent的详细代码如下。

@Component({
  selector: "text-box",
  template: `

    <div class="form-group row">
      <label class="col-2 col-form-label">{{label}}</label>
      <div class="col-10">
        <input class="form-control" placeholder="{{placeholder}}" [(ngModel)]="inputValue" />
      </div>
    </div>
  `,
  providers: [TEXTBOX_VALUE_ACCESSOR],
})

export class TextBoxComponent implements ControlValueAccessor {
  private _inputValue: any = '';
  private _onTouchedCallback: () => {};
  private _onChangeCallback: (_:any) => {};

  @Input("label") label: string = "Your Label";
  @Input("placeholder") placeholder: string = "Your Placeholder";


  get inputValue(): any {
    return this._inputValue;
  }
  set inputValue(value: any) {
    if (value !== this._inputValue) {
      this._inputValue = value;
      this._onChangeCallback(value);
    }

    this._onTouchedCallback();

  }

  //From ControlValueAccessor interface
  writeValue(value: any) {
    this._inputValue = value;
  }

  //From ControlValueAccessor interface
  registerOnChange(fn: any) {
    this._onChangeCallback = fn;
  }

  //From ControlValueAccessor interface
  registerOnTouched(fn: any) {
    this._onTouchedCallback = fn;
  }
}

使用方法：

<form [formGroup]="formGroup">
  <text-box formControlName="textboxControl" label="My Label" placeholder="My Placeholder"></text-box>

  <pre>{{formGroup.value | json}}</pre>
</form>

完整的代码可在stackblitz中找到。

Answer 2

“键”正在使用viewProvider。您使用@Input设置为formControl赋值，请参见stackblitz。 “魔术”是指如果在“子级”中引用formControl或在父级中引用form.get（'input1'）

@Component({
  selector: 'app-form-control',
  template: `
  <div class="form-group row">
  <label class="col-2 col-form-label">{{label}}</label>
  <div class="col-10">
    <input class="form-control" placeholder="{{placeholder}}"
    [formControl]="formControl" autocomplete="nope"/>
  </div>
  </div>
  <!--you can control the properties of formControl-->
  {{formControl.valid}}{{formControl.touched}}}
`,
viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }]})
export class HelloComponent {

  formControl: FormControl;

  constructor(private parentF: FormGroupDirective) { }

  @Input() 
  set controlName(value) {
    this.formControl = this.parentF.form.get(value) as FormControl
  }

  @Input() label: string;
  @Input() placeholder: string;

}

并以这种方式调用组件：

<form [formGroup]="myForm" (submit)="submit(myForm.value)">
    <app-form-control label="Lastname" placeholder="Lastname" controlName="lastName"></app-form-control>
</form>

用验证器包装角反应形式组件

2 个答案: