如何防止在单击按钮时重置表单域？(打字/角度)
如何防止在单击按钮时重置表单域？(打字/角度)
提问于 2019-01-04 02:33:52
有一个按钮，用户可以点击，这将添加更多的地址表单字段。如果用户在字段中填写他们的地址信息，然后单击按钮添加更多地址，则会清除之前的输入。如何防止该按钮清除以前的条目？
我的component.ts文件中的代码片段：
ngOnInit() {
this.addresses = [];
this.addresses.push(new Address('', undefined ,'','Canada',''));
}
addAddress(){
this.addresses.push(new Address('', undefined ,'','Canada',''));
}我的address.ts文件：
export class Address {
constructor(
public streetAddress: string,
public province: string,
public city: string,
public country: string,
public postalCode: string
) { }
}我的component.html文件中的代码片段：
<div class="card-body" *ngFor="let address of addresses">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control"
[(ngModel)]="address.streetAddress" #streetAddress="ngModel"
name="streetAddress" placeholder="Apartment/House Number and Street
Address">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control" [(ngModel)]="address.city"
#city="ngModel" name="city" placeholder="City/Town">
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-warning btn-block" id="addAddress"
(click)="addAddress()">More Addresses</button>回答 1
Stack Overflow用户
发布于 2019-01-04 03:12:18
在services中存储和操作数据的更好实践
address.service.ts
import { Injectable } from '@angular/core';
import { Address } from './Address';
@Injectable()
export class AddressService {
constructor() { }
addresses = [];
addAddress(address: Address) {
this.addresses.push(Address);
}
}在addAddresses method as argument中，您可以从提交的表单中提供地址，也可以阅读有关如何正确管理表单的信息here您的component.ts文件可以是这样的：
export class AppComponent implements OnInit {
addresses: Address[];
form = new FormGroup({
streetAddress: new FormControl(''),
province: new FormControl(''),
city: new FormControl(''),
country: new FormControl(''),
postalCode: new FormControl('')
});
constructor(private addrs: AddressService) {}
ngOnInit() {
this.addresses = this.addrs.addresses;
}
onSubmit() {
this.addrs.addAddress(this.form.value);
this.form.reset();
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54027917
复制相关文章
相似问题