Question

我正在尝试从API加载值后更新表单值。我尝试使用app.post("/api/Upload", function(req, res) { upload(req, res, function(err) { if (err) { return res.end("Something went wrong!"); } return res.end("File uploaded sucessfully!."); }); });技术，但即使设置了表单，表单也不可见。

我无法共享整个项目，但这里是组件模板和控制器

模板

#                                                      ⇓⇓⇓⇓⇓⇓⇓⇓⇓
<% [["cricket","cri"], ["tennis","ten"], ...].each do |name, val| %>
  <div class="col-md-4" >
    <p><%= f.check_box :game, {:multiple => true, checked: @training.game&.include?(val)}, name, "" %>&nbsp;<%= name %></p>
  </div>
<% end %>

控制器

*ngIf

有什么问题？在设置表单后，它甚至不显示表单本身。在从API加载数据后是否有另一种设置表单值的方法？

Answer 1

您可以创建单独的函数来使用数据填充表单。您可以在从API获取数据后调用此函数。

变式1：updateValues(dataObject: any) { this.heroForm.setValue({ name: this.hero.name, address: this.hero.addresses[0] || new Address() }); }

官方角度文件：setValue

使用setValue，您可以通过传入其属性与FormGroup后面的表单模型完全匹配的数据对象来一次分配每个表单控件值。

示例：

patchValue

变式2：updateValues(dataObject: any) { this.heroForm.patchValue({ name: this.hero.name }); }

官方角度文件：patchValue

使用patchValue，您可以通过为感兴趣的控件提供键/值对的对象，为FormGroup中的特定控件赋值。

示例：

msft['Tested On'] = pd.to_datetime(msft['Tested On'])
msft['Tested On'].dt.date
df = msft[msft['Tested On'] == '2018-02-02']

Answer 2

我已经遇到过这个问题，我不知道我的解决方案是否最好，但它确实有效。该技术是使用您false发起的true，一旦您的数据在您的组件中完全恢复，您将其设置为<div *ngIf="loaded == false"> <h2>loading ...</h2> </div> <div *ngIf="loaded == true"> // your template goes here </div>

这是一个例子：

html的：

loaded: boolean = false;

// your code ....

ngOnInit() {
  setTimeout(() => {
    this._dashboardService.routeChangeStarted();
  }, 0);
  this._activatedRoute.params.subscribe(params => {
    this.news["id"] = params["id"];
    this.getPartners().then(data => {
      this.getNews().then(data=>{
        this.setForm();

        // here is the important part!
        this.loaded = true
      })
    });
  });
}

并在你的.ts：

po label.font.description

Answer 3

您可以使用setValue或patchValue为您FormGroup异步使用的数据。

private initForm(): void {
    // For update product
    if (this.isUpdate) {
      this.productService.getProduct(this.id)
        .subscribe((product: Product) => {
          this.productForm.patchValue({
            name: product.name,
            price: product.price,
            description: product.description,
            image: product.image
          });
        });
    }
    // For create product
    this.productForm = new FormGroup({
      name: new FormControl(null, [
        Validators.required,
        Validators.minLength(8),
        Validators.maxLength(35)
      ]),
      price: new FormControl(null, [
        Validators.required,
        Validators.min(5000),
        Validators.max(50000000),
      ]),
      description: new FormControl(null, [
        Validators.required,
        Validators.minLength(8),
        Validators.maxLength(500)
      ]),
      image: new FormControl(null, Validators.required)
    });
  }

Answer 4

为了从承诺订阅更新表单，我需要手动运行更改检测。这可以通过导入来实现

constructor(private changeDetectorRef: ChangeDetectorRef) {
}

并运行

this.changeDetectorRef.detectChanges();

加载数据后设置反应形式（异步） - Angular 5

4 个答案: