Question

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

主要问题是提交表格。获取的代码取决于：

无法阅读财产＆＃39;价值＆＃39;未定义;
_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>

当我使用该模板时，它返回Cannot read property 'value' of undefined，当我向输入添加#fleetname时，它返回：_this.form.get is not a function。

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

Answer 1

您收到错误的原因

无法读取属性＆＃39;值＆＃39;未定义的

是因为您在提交中传递了错误的值，它应该是：

(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提交表单错误

1 个答案:

Demo