Question

我分离了一个特殊的输入行，因为它经常被使用，所以最好创建一个新的组件来单独处理其所有内容。问题是，当我按下重置按钮时，位于新组件内的文本输入的值不会更改回其原始值，而是会被删除。我猜这是因为输入的值动态地连接到组件的输入参数，而实际的输入字段没有value="constant text"属性。

页面的HTML：

<form>
    <h3 class="form-group-caption"
        >Mappaútvonalak
        <input type="reset" class="ml-3 btn btn-light" value="Visszaállítás" />
    </h3>
    <app-stateful-text-input
        label="FRM"
        inputValue="A:\Temp"
        inputType="text"
        apiPath="/api/frm"
    ></app-stateful-text-input>

该组件的HTML包含一些包装器元素，并且：

<input
    type="{{inputType}}"
    class="form-control form-control-lg"
    id="input-{{label}}"
    value="{{inputValue}}"
    (keypress)='onInputChanged($event)'
/>

对于一个输入，我可以编写一个resetInputs()方法，并在按下重置按钮时调用它。但是，此新组件有很多实例，它们在表单内的多个页面中的多个页面中。如果我需要维护对所有这些元素的引用，只是为了能够在该子组件中调用方法，我将失去将它们分开的关键点。

有没有针对这种情况的简单解决方案？

Answer 1

您可以在Input组件中设置一个默认值，并按照建议在父组件中与resetInputs()方法一起使用。

<app-stateful-text-input
        label="FRM"
        defaultValue="A:\Temp"
        inputType="text"
        apiPath="/api/frm"
    ></app-stateful-text-input>


@Component({
  selector: 'app-stateful-text-input',
  template: `...`
})
export class StatefulTextInputComponent implements OnInit {
  @Input() 
  public defaultValue: string;

  public inputValue: string;

  public ngOnInit(): void {
      this.inputValue = this.defaultValue;
  }
}

在父组件中，您可以迭代所有子项的自定义输入，并在重置时设置旧值。


@Component({
  selector: 'app-form-component',
  template: `...`
})
class FormComponent {
  @ViewChildren(StatefulTextInputComponent) statefulTextInputs: QueryList<StatefulTextInputComponent>;
  ...

  public resetInputs(): void {
     this.statefulTextInputs.forEach((item: StatefulTextInputComponent) => item.inputValue = item.defaultValue);
  }

  ...
}

Answer 2

我可以通过向容器reset添加一个<form>事件监听器来自动实现这一点，那时我用存储的属性覆盖了value属性。

但是，它仍然很丑陋，这需要附加的JS。我希望有一个“本机解决方案”，其中的重置按钮可以完成其想要的操作。

export class StatefulInputComponent implements OnInit {
    @Input() inputValue: string;
    @ViewChild('inputField', {static: true}) inputField: ElementRef;
    defaultValue: string;
    ngOnInit() {
        this.defaultValue = this.inputValue;
        let element = this.inputField.nativeElement as HTMLElement;
        do {
            element = element.parentElement;
        } while (element != null && element.tagName !== 'FORM');
        if (element == null) {
            throw new Error('<app-stateful-input> must be placed inside a <form>!');
        }
        const form = element as HTMLFormElement;
        form.addEventListener('reset', (event: Event) => {
            const input = this.inputField.nativeElement as HTMLInputElement;
            input.value = this.defaultValue;
            event.preventDefault();
        });
    }
}

重置按钮清除子组件输入的值

2 个答案: