[英]Reset Form (Reactive Forms)
这是HTML:
<div class="container">
<ng-template [ngIf]="userIsAuthenticated">
<form [formGroup]='form' name="test">
<div class="form-group">
<input type="text" class="form-control" name="header" placeholder="Post Header" formControlName="header">
</div>
<div class="input-group">
<textarea class="form-control" rows="3" name="message" placeholder="Post Message" formControlName="message"></textarea>
</div>
<div class="form-group">
<input class="form-control-file" type="file" id="file1" ng-model="test1" (change)="onFilePicked($event)">
</div>
<button class="btn btn-success btn-sm" id="postbtn" type="button" [disabled]="!form.valid" (click)="onSavePost()">{{ btnText }}</button>
</form>
</ng-template>
</div>
还有更多内容,但是我可以使用它来重置TS文件中的表单:
this.form.reset();
这将重置文件以外的所有内容。
我在创建此文件的同时删除了该文件:
<button ng-click="angular.copy(file1)" #filePicker id="file2" type="reset">Remove files</button>
但是,使用此方法似乎<button ng-click="angular.copy(file1)" #filePicker id="file2" type="reset">Remove files</button>
好习惯。
我也在ts文件中尝试过此操作。 this.form.value.file.nativeElement.value = '';
这似乎重新加载了页面,这不好。
任何建议都是很棒的, 请仅提供贡献性的意见。
首先将您的输入绑定到avalie模型
<input ng-model="test1"> --> <input [(ngModel)]="test1" #fileInput>
并重置它,将其声明为视图子级,然后像这样重置它
@ViewChild('fileInput') fileInput: ElementRef;
resetForm() {
this.form.reset();
this.fileInput.nativeElement.value = undefined;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.