Angular 4次提交表单错误

Question

我的表格有几个问题。它被设计成一个搜索工具。 1 个输入，1 个按钮，我们开始吧。但有些事情是不对的。我使用 API，当你向它发送一个字符串时，它会带回包含特定字符串的所有值。当您发送一个空值时，它 returns 所有可能的值。

主要问题是提交表单。根据我得到的代码：

无法读取未定义的属性 'value'；
_this.form.get 不是函数。

代码如下：

服务

@Injectable()
export class FleetService {
  private defUrl = 'some.url';

  constructor(private http: Http) { }

  getFleet(fleetname?: string) {
    const url = (!fleetname) ? this.defUrl : 'some.url=' + fleetname;
    return this.http.get(url)
      .map(res => res.json());
  }
}

组件

export class FleetComponent implements OnInit {

  ngOnInit() {
    this.searchQuery = new FormGroup({
      fleetname: new FormControl('', Validators.required)
    });
  }

  public flota: FleetHead[];
  public searchQuery: FormGroup;

  constructor(private fleetService: FleetService, private router: Router) {
    this.fleetService.getFleet().subscribe(fleet => {
      this.flota = fleet;
    })
  }

  search(searchQuery) {
    this.fleetService
      .getFleet(searchQuery.value.fleetname)
      .subscribe(searchQuery => {
        this.searchQuery = searchQuery;
        this.router.navigate(['/fleet']);
      })
  }

}

interface FleetHead {
  fleets: FleetInfo[];
}

interface FleetInfo {
  id: number;
  name: string;
}

模板

<form class="form-inline" novalidate (ngSubmit)="search(fleetname)" [formGroup]="searchQuery">
  <div class="form-group">
    <input class="form-control" formControlName="fleetname" type="text" placeholder="Search">
  </div>
  <button class="btn btn-info" type="submit">Search</button>
</form>

<div *ngIf="flota">
  <p-dataTable [value]="flota.fleets">
    <p-header>Search results</p-header>
    <p-column field="id" header="ID" [sortable]="true"></p-column>
    <p-column field="name" header="Name" [sortable]="true"></p-column>
  </p-dataTable>
</div>

当我使用那个模板时 returns Cannot read property 'value' of undefined，当我添加一个 #fleetname 来输入它时 returns: _this.form.get is not a function.

此模板在路由 /fleet 上运行，在提交时我想留在该页面上，但具有更新的值，因此搜索结果可能会有所不同。

Answer 1

您收到错误的原因

cannot read property 'value' of undefined

是因为您在提交中传递的值不正确，应该是：

(ngSubmit)="search(searchQuery)"

能够在您的函数中执行此操作：

this.fleetService
  .getFleet(searchQuery.value.fleetname)
     .subscribe(...)

你应该也不需要在这里使用路由器导航，所以删除这个：

this.router.navigate(['/fleet']);

搜索后应该更新值 :) 据我所见，您不想将值保存到变量 searchQuery，而是保存到变量 flota，显示结果，所以你的函数不应该是这样的：

search(searchQuery) {
  this.fleetService
    .getFleet(searchQuery.value.fleetname)
    .subscribe(searchQuery => {
      this.flota = searchQuery;
    })
}

这是一个

Demo

使用相同的设置，但我们使用 omdbapi :)

Angular 4次提交表单错误

Angular 4 submit form errors

typescript

angular2-forms

angular2-routing

angular

Demo