Angular 4 表单重置提交到服务器

Posted 2023-03-13

【中文标题】Angular 4 表单重置提交到服务器

【英文标题】：Angular 4 Form Reset Submits to Server

【发布时间】：2018-02-17 18:21:53

【问题描述】：

我有以下 html 表单：

<form class="row" name="powerPlantSearchForm" (ngSubmit)="f.valid && searchPowerPlants()" #f="ngForm" novalidate>
          <div class="form-group col-xs-3" >
            <label for="powerPlantName">PowerPlant Name</label>
            <input type="text" class="form-control-small" [ngClass]=" 'has-error': f.submitted && !powerPlantName.valid " name="powerPlantName" [(ngModel)]="model.powerPlantName" #powerPlantName="ngModel" />
          </div>
          <div class="form-group col-xs-3" >
            <label for="powerPlantType">PowerPlant Type</label>
            <select class="form-control" [(ngModel)]="model.powerPlantType" name="powerPlantType">
              <option value="" disabled>--Select Type--</option>
              <option [ngValue]="powerPlantType" *ngFor="let powerPlantType of powerPlantTypes">
                 powerPlantType 
              </option>
            </select>
          </div>
          <div class="form-group col-xs-3" >
            <label for="organizationName">Organization Name</label>
            <input type="text" class="form-control-small" name="powerPlantOrganization" [(ngModel)]="model.powerPlantOrg" #organizationName="ngModel" />
          </div>
          <div class="form-group col-xs-3" >
            <label for="powerPlantStatus">PowerPlant Active Status</label>
            <select class="form-control" [(ngModel)]="model.powerPlantStatus" name="powerPlantStatus">
              <option value="" disabled>--Select Status--</option>
              <option [ngValue]="powerPlantStatus" *ngFor="let powerPlantStatus of powerPlantStatuses">
                 powerPlantStatus 
              </option>
            </select>
          </div>
          <div class="form-group col-md-3 col-xs-4">
            <button [disabled]="loading" class="btn btn-primary">Search</button>
            <img *ngIf="loading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" />
          </div>
          <div class="form-group col-md-3 col-xs-3">
            <button class="btn btn-primary" (click)="f.reset()">Reset</button>
          </div>
        </form>

这是我的组件：

export class HomeComponent implements OnInit 
  // Represents the PowerPlantTypes
  powerPlantTypes = ['RampUpType', 'OnOffType'];
  // Represents the status of a PowerPlant
  powerPlantStatuses = ['Active & Disabled', 'Active', 'Disabled'];
  // Represents the search form
  model: any = ;
  // currentUser: User;
  // represents the list of PowerPlant data
  powerPlants: PowerPlant[];
  users: User[] = [];

  constructor(private powerPlantService: PowerPlantService) 
    // this.currentUser = JSON.parse(localStorage.getItem('currentUser'));
    // Set the initial values for the drop down fields in the UI
  

  ngOnInit() 
    this.model.powerPlantType = '';
    this.model.powerPlantStatus = '';
  

  selectName() 
    alert(this.model.powerPlantType);
  

  searchPowerPlants(): void 
    const powerPlantSearchParams = new PowerPlantSearchParams(
      this.model.powerPlantType,
      this.model.powerPlantOrg,
      this.model.powerPlantName,
      this.model.page,
      this.model.powerPlantStatus);

    this.powerPlantService.searchPowerPlants(powerPlantSearchParams).subscribe(result => 
      this.powerPlants = <PowerPlant[]> result;
    );
  

  allPowerPlants(onlyActive: boolean = false, page: number = 1): void 
    this.powerPlantService.allPowerPlants(onlyActive, page).subscribe(result => 
      this.powerPlants = <PowerPlant[]> result;
    );
  

当我单击我的 html 页面中的重置按钮时，方法 searchPowerPlants() 被调用。我怎样才能避免这种情况？

编辑：使用 type="reset" 后，它不再向服务器提交，但下拉列表显示了一些其他值而不是默认值。从下面的屏幕截图中可以看出，在点击重置按钮后，下拉列表现在将 RampUpType 显示为 PowerPlantType，但我希望它显示 --Select Type--

【问题讨论】：

尝试把 type="reset' 放在那个按钮上？

是的，当ngSubmit() 出现在<form> 标签上时，任何不 具有type="button" 或type="reset" 的按钮都会触发表单提交

可以在按钮元素here中看到更多关于type属性的内容@

感谢您的建议，但我又遇到了一个奇怪的错误！请看我编辑的帖子！

【参考方案1】：

在您的按钮上输入 type="button" 并删除 f.reset()。而是：

    <button type="button" (click)="reset()" class="btn btn-primary">Reset</button>

和

  reset()
    this.model.powerPlantType = '';
    this.model.powerPlantStatus = '';

  

您也可以从 ngOnInit() 调用 reset()。 但也不要忘记为其他输入添加重置值。

https://stackblitz.com/edit/angular-zx3uwx?file=app%2Fapp.component.html

【讨论】：

酷！这就是我所做的！谢谢！

我还必须删除

中的禁用

我猜它也解决了上一个问题？

是的！绝对！

这里的关键是去掉选项标签中的禁用！我接受了你的回答并投了赞成票。您能否也请投票给我的问题！