在任何路由之前检测表单值的通用指令

Question

我需要团队建议，我有超过10份表格。我想在路由之前创建通用指令或任何其他选项形式的值更改。 如果表格发生变化，我们需要从通知中得到确认。 在 candeactive 方法中，我们正在实现每个组件。我想维护单个文件

Answer 1

如果“更改”是指将路由之前的表单（当前）与其原始默认/占位符值进行比较，

原生 JavaScript

这种情况的替代方案之一（不使用指令）是使用本机 JavaScript Window: beforeunload 事件。这种替代方案可能看起来不是最漂亮的，但可能是最小的开销（不需要手动配置 10 个表单）

我们可以在父组件中做这样的事情：

//Vanilla JavaScript
const beforeUnloadHandler = (event) => {
  event.preventDefault();
};

const nameInput = document.querySelector(".nameForm");
const nameInputPlaceholder = document.querySelector(".nameForm").placeholder;

nameInput.addEventListener("input", (event) => {
  if (event.target.value !== nameInputPlaceholder) {
    window.addEventListener("beforeunload", beforeUnloadHandler);
  } else {
    window.removeEventListener("beforeunload", beforeUnloadHandler);
  }
});

//HTML
<div>
  <form>
    <label for="name">Input your name*:</label>
    <input type="text" name="name" id="name" class="nameForm" placeholder="please input your entry" />
  </form>
</div>

<div>
  <form>
    <label for="nickname">Input your nickname*:</label>
    <input type="text" name="nickname" id="nickname" class="nameForm" placeholder="please input your entry" />
  </form>
</div>

角度

参考另一个线程“subscribe to valueChanges from input FormControl in FormGroup”，Touqeer Shafi 对于 Angular FormGroup、ngModel 和订阅有一个很好的想法和示例。然而，这将要求您为 10 种表格中的每一种进行所有设置。

我们也可以做类似的事情：

//Angular
myForm: FormGroup;
name = '';
nickname = '';

ngOnInit() {
  this.myForm = this.formBuilder.group({
    name: [this.name],
    nickname: [this.nickname]
  });
  this.myForm.controls['name'].valueChanges.subscribe(value => {
    console.log(value);
  });

  this.myForm.controls['nickname'].valueChanges.subscribe(value => {
    console.log(value);
  });
}

//HTML
<form [formGroup]="myForm">

  <div>
    <label for="name">Input your name*:</label>
    <input type="text" name="name" id="name" [(ngModel)]="name" class="nameForm" placeholder="please input your entry" />
  </div>

  <div>
    <label for="nickname">Input your nickname*:</label>
    <input type="text" name="nickname" id="nickname" [(ngModel)]="nickname" class="nameForm" placeholder="please input your entry" />
  </div>

</form>