Angular 5中输入框值留存及添加至JS对象的实现问题

嘿，我来帮你搞定Angular 5里表单提交后输入框值丢失的问题！

问题根源分析 #

你遇到的核心问题大概率是表单提交触发了默认的页面刷新，或者在createSimpleTypeList方法里不小心重置了表单/绑定的模型值，导致输入框内容被清空。

具体解决方案 #

1. 阻止表单默认提交行为

Angular的ngSubmit虽然会处理表单逻辑，但如果没阻止默认事件，浏览器还是会触发页面刷新，直接清空所有输入内容。你可以在模板和组件里做如下修改：

模板代码：

<form class="form-group" (ngSubmit)="createSimpleTypeList(f, $event)" #f="ngForm" >
  <div class="container">
    <div class="row">
      <div class="col-sm-12" >
        <!-- 给输入框加上双向绑定，确保值能同步到组件变量 -->
        <input type="text" name="typeName" class="form-control" [(ngModel)]="currentTypeName" placeholder="输入类型名称">
        <button class="btn btn-danger flex ">Construir Json!</button>
      </div>
    </div>
  </div>
</form>

组件代码：

import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'your-component-selector',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  // 定义变量绑定输入框的值
  currentTypeName: string = '';

  createSimpleTypeList(form: NgForm, event: Event) {
    // 关键：阻止浏览器默认的表单提交刷新行为
    event.preventDefault();

    // 这里写你的业务逻辑，比如获取表单值处理XML
    const formData = form.value;
    console.log('要处理的表单数据:', formData);

    // 注意：不要调用form.reset()，除非你确实需要清空表单
    // form.reset(); // 这行代码会直接清空输入框，需要移除
  }
}

2. 确保输入框用双向绑定

每个需要保留值的输入框，都要加上[(ngModel)]绑定到组件的变量，同时必须指定name属性（Angular表单需要name来跟踪控件状态）。这样即使表单提交，只要组件里的绑定变量没被修改，输入框的值就会一直保留。

额外提醒 #

如果你的表单有多个输入项，只需要给每个输入框重复上述的[(ngModel)]和name配置即可，Angular会自动维护每个控件的状态和值。

内容的提问来源于stack exchange，提问作者Andre Gomez