Кнопка сброса стирает значение подкомпонентного входа

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();
        });
    }
}