angular - 将 ngModel 值重置为默认模型？

Question

我正在使用 ngForm，在我的表单底部有一个重置按钮。当我点击重置时，整个表单都会重置，但不会恢复我的 ts 模型中建立的初始模型值。

当我点击重置按钮而不是清除整个表单时，如何确保下面的模型存在？

在ts文件中:

 model = {
  color: 'Red',
  size: 'XS',
  age: '34'
};

html:

        <div class="form-group">
            <label for="region">Select Color</label>
                <input id="color" class="form-control" name="color"
                    [(ngModel)]="model.color" [typeahead]="colors" required>
        </div>

        <div class="form-group">
            <label for="region">Select Size</label>
                <input id="size" class="form-control" name="size"
                    [(ngModel)]="model.size" [typeahead]="sizes" required>
        </div>

        <div class="form-group">
            <label for="age">Select Color</label>
                <input id="age" class="form-control" name="age"
                    [(ngModel)]="model.age" [typeahead]="ages" required>
        </div>

Answer 1

很简单，在ngform的reset方法中传递默认值的对象即可，进一步引用这个app .

  resetFormWithDefaultValues(){
    this.slForm.reset(this.defaultValues);
  }