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!';
    }
}

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

Angular 8: Reset form inputs values to another value

html

angular

typescript

forms

angular-forms