Angular 4 – 重置表单使插入的模型在视图中填充空值

Question

我想在提交后重置表单。我的用例分别如下：

 1. Fill form (template-driven solution).
 2. Get model from form and with service pass it to the database.

     2.1. Add model to database
     2.2. Assign model to an array

 3. Update view by this updated array.

问题是，如果我在调用我的服务方法后重置表单，发送到数据库的数据是有效的，但在客户端我收到空值——这意味着在刷新 angular 客户端（浏览器） ) 数据完全加载，没有任何错误。另一方面，如果不包括重置方法，一切正常，正如预期的那样——只有表格没有重置（逻辑上）。

我尝试调试我的解决方案，但或多或少没有成功。但是，我想到了一个想法。在该服务层中进行了异步调用，重置表单的方法是否有可能在处理请求的过程中偏向参数，方法 addCrop?

组件

Injectable()
export class CropsComponent implements OnInit {
            
options$ : Observable<StyleModel[]>;
crop$;
documentTypes = ['Pdf','LaTeX'];
//used for binding in form
cropModel : CropModel;

constructor(private _styleService: StyleRepositoryService) { }
            
ngOnInit() {
  this._styleService.getCropOnChange().subscribe(crop => this.cropModel = crop);
  this.options$ = this._styleService.getStylesOnChange();
}
            
onSubmit(f:NgForm)
{
  if(f.valid){
  //calling service layer for storing this model in database
  this._styleService.addCrop(this.cropModel);
  //resetting form values
  f.reset();
  }
 }
}

服务

@Injectable()
export class StyleRepositoryService {

  /*
     [abbrev.]
  */

    addCrop(crop: CropModel){
        this.dataService.createCrop(crop).subscribe(data =>{
            //find style according to CropModel styleId. Style model include array of cropModels
            let stl = this.styles.find(p => p.styleId == data.styleId);
            //add this cropModel to found style
            stl.styleCrops.push(crop);

           //log inform me about added model with null values
            console.log(this.styles);

            //notify other components that styles array have updated.
            this.styles$.next(this.styles);
        })
    }

  /*
     [abbrev.]
  */

}

服务请求成功 - 模型已添加到数据库。正如我在顶部提到的。传递的参数 crop 是否有可能即使已经传递也可以通过重置表单方法拦截？因此，当我将模型（来自 addCrop 方法的参数）添加到数组时，模型为空。

编辑

addCrop 方法运行s post 请求哪些 return 数据 – 后端服务器 returns 与在 Angular。所以，如果我使用 returned 数据，视图就会正确更改。 所以澄清一下问题 reset form方法可以改变属性的值 crop 在 addCrop 方法的一半运行?

  addCrop(crop: CropModel){
        this.dataService.createCrop(crop).subscribe(data =>{
            //find style according to CropModel styleId. Style model include array of cropModels
            let stl = this.styles.find(p => p.styleId == data.styleId);
            //add this cropModel to found style
            //instead using parameter crop, I used returned model from backend, data
            stl.styleCrops.push(data);

           //log inform me about added model with null values
            console.log(this.styles);

            //notify other components that styles array have updated.
            this.styles$.next(this.styles);
        })
    }

Answer 1

根据@DeborahK，我发现了两个问题。

了解如何进行异步调用很重要。作为 angular 的新手，这是一个很好的观点（归功于@DeborahK），这让我更好地思考代码流程。
但主要问题在于传递参数。在 onSubmit 方法中，我将引用类型 cropModel 传递给服务方法 addCrop。问题是，该表单引用相同的对象 - cropModel，因为它已绑定。因此，如果我重置表单，我会为引用的对象设置值（空值）——在这种情况下 cropModel。并且由于方法 addCrop 进行异步调用，因此可以在该调用期间将 cropModel 设置为 null。

解决方法很简单。在属性 cropModel 的值内初始化新对象并将其传递给方法 addCrop

解决方案

 onSubmit(f:NgForm)
  {
    if(f.valid){
      this._styleService.addCrop(new CropModel(this.cropModel.bottomMargin,
        this.cropModel.leftMargin,
         this.cropModel.rightMargin,
          this.cropModel.topMargin, 
          this.cropModel.styleId,
          this.cropModel.documentType));
      f.reset();
    }
  }

Angular 4 – 重置表单使插入的模型在视图中填充空值

Angular 4 – reset form makes inserted model filled with null values in a view

forms

angular2-forms

angular

angular4-forms

编辑

解决方案