重置表格(反应形式)

时间:2018-07-04 11:18:05

标签: javascript html angular

这是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>,但是使用此方法似乎不是好习惯。

我也在ts文件中尝试过此操作。 this.form.value.file.nativeElement.value = '';

这似乎重新加载了页面,这不好。

任何建议,仅是贡献性的意见。

1 个答案:

答案 0 :(得分:1)

首先使用

将输入绑定到avalie模型。
<uses-feature
    android:name="android.hardware.touchscreen"
    android:required="false" />
<uses-feature
    android:name="android.software.leanback"
    android:required="true" />

<application
    android:name=".Application.MyApp"
    android:allowBackup="true"
    android:banner="@drawable/tv_banner"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:supportsRtl="true"
    android:theme="@style/MyAppTheme">
    <activity
        android:name=".LoginActivity"
        android:excludeFromRecents="true"
        android:screenOrientation="landscape">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />

            <category android:name="android.intent.category.LEANBACK_LAUNCHER" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
    </activity>

要重置它,请将其声明为view child,然后像这样重置它

<input ng-model="test1"> --> <input [(ngModel)]="test1" #fileInput>