Question

在Angular 4应用程序的组件中考虑以下简单示例。它显示了一个带有两个输入字段的简单HTML表单。一个输入字段直接实现，第二个输入字段在子组件中：

<form #personForm="ngForm">
    <input type="text" required name="firstname [(ngModel)]="firstname"/>
    <app-smart-input required [(model)]="lastname"></app-smart-input>
    <button [disabled]="personForm.valid === false">Send</button>
</form>

子组件定义如下：

import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";

@Component({
    selector: "app-smart-input",
    templateUrl: "./smart-input.component.html",
    styleUrls: ["./smart-input.component.css"]
})
export class SmartInputComponent {

    ////////////////
    // PROPERTIES //
    ////////////////

    @Input() model: string;
    @Output() modelChange: EventEmitter<string> = new EventEmitter<string>();

    @Input("required") required: boolean = false;

    /////////////
    // METHODS //
    /////////////

    updateChanges() {
        this.modelChange.emit(this.model);
    }

}

使用以下html：

<input type="text" [required]="required" [(ngModel)]="model" (ngModelChange)="updateChanges()" />

现在更新模型的工作非常正常（firstname和lastname由用户输入按预期定义。）

我想要实现的是按钮被禁用，除非两个字段都被填入。请注意required实现中的<input>标志，因此值不应为null / undefined。< / p>

但遗憾的是，如果firstname定义不明确，现在只会禁用该按钮。但表单并不关心lastname。

我将如何实现这一目标？

注意：Angular 2 creating reactive forms with nested components是类似的，但我使用模板驱动的形式，而不是反应形式。但它可能会以某种方式进行调整？

Answer 1

如果您希望SmartInputComponent作为Angular Form的一部分参与，则需要实现ControlValueAccessor。

这意味着为自定义组件提供一种方法，让更改在它与父窗体之间传播。这是一个使用SmartInputComponent作为基础的实现。

import { Component, OnInit, Input, Output, EventEmitter, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms'

@Component({
  selector: 'app-smart-input',
  templateUrl: './smart-input.component.html',
  styleUrls: ['./smart-input.component.css'],
  providers:[ { 
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => SmartInputComponent),
    multi: true
  }]
})
export class SmartInputComponent implements ControlValueAccessor {

  @Input() model: any;

  onChange = (_: any) => {};
  onTouched = () => {};

  writeValue(obj: any): void {
    if (obj !== undefined) { 
      this.model = obj;
    }
  }

  registerOnChange(fn: any): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }

  setDisabledState?(isDisabled: boolean): void {
    //TODO: enabled/disable your input field if you need to
  }

  updateChanges(val) {
     this.onChange(val);
  }

  updateBlur(){
    this.onTouched();
  }
}

使用如下模板：

<input type="text" (input)="updateChanges(myTextBox.value)" (blur)="updateBlur()" #myTextBox [value]="model"/>

然后在使用组件时，让它以标准控件（Angular为您提供ControlValueAccessor实现）的形式参与其中。

<form #personForm="ngForm">
  <input type="text" required name="firstname" [(ngModel)]="firstname" name="firstName" />
  <app-smart-input required [(ngModel)]="lastname" name="secondName"></app-smart-input>
  <button [disabled]="personForm.valid === false">Send</button>

  {{personForm.value | json}}

</form>

如果运行此表单，您会看到personForm现在已捕获第一个和第二个名称值。

另请参阅ControlValueAccessor

上的Angular文档

如何使用嵌套组件在表单中实现自动表单验证？

1 个答案: