Angular 8：将表单输入值重置为另一个值

Question

是否可以重置表单输入值并随后从服务中设置另一个值？ 我想在saveService 中保存旧值，重置service 并将服务的name 属性设置为Hello World！

所以在我的 saveService 中，我正确地拥有旧值，但我表单中的输入仍然为空。 我也尝试过不重置表单，但没有。

这是我的代码：

.html

<form id="formExample">
    <input type="text" id="name" [(ngModel)]="service.name" #name>
</form> 
<button (click)="save()">save</button> 
<button (click)="reset()">reset</button>

.ts

export class Hero {
    constructor(public service: Service, public saveService: SaveService){}
    save(){
        this.saveService.name = this.service.name
    }
    reset(){
        this.service = new Service();
        let form = document.getElementsById('formExample');

        form.reset();

        this.service.name = 'Hello World!';
    }
}

Answer 1

如果ngModel 在表单标签中使用，则必须设置名称属性或表单 控件必须在ngModelOptions 中定义为'standalone'。

<form id="formExample" #myForm>
    <input [ngModelOptions]="{standalone: true}" type="text" id="name" [(ngModel)]="service.name" #name>
</form> 
<button (click)="save()">save</button> 
<button (click)="reset(myForm)">reset</button>

export class Hero {
    constructor(public service: Service, public saveService: SaveService){}
    save(){
        this.saveService.name = this.service.name
    }
    reset(form){
        this.service = new Service();

        form.reset();

        this.service.name = 'Hello World!';
    }
}