时间戳

首页 > 解决方案 > 有没有一种方法可以将一些用于角度反应形式控制的 get 方法包装到一个函数中

javascript - 有没有一种方法可以将一些用于角度反应形式控制的 get 方法包装到一个函数中

问题描述

美好的一天，这是我第一次在这里提出问题并且非常肯定解决方案，在我的组件中，我在下面有一个角度反应形式设置和一些吸气剂（我称之为大声笑）但它有点混乱，我的意思是这个表单控件实际上很多，请问有没有办法可以将这个 getter 包装到一个函数中，这样我就不会有几行代码了。我是一个 JavaScript 新手。

formName = new FormGroup({
    accNum: new FormControl('', [Validators.required]),
    appName: new FormControl('', Validators.required),
    ...
    Addr: new FormControl('', Validators.required),
  });

//form getters
  get accNum(){
    return this.formName.get('accNum')
  }

  get appName(){
    return this.formName.get('appName');
  }
   ...

 get Addr(){
    return this.formName.get('Addr');
  }

我这样做是为了能够像这样在我的 html 模板中设置表单控件。

<input formControlName="accNum" type="text" class="form-control">
<input formControlName="appName" type="text" class="form-control">
<input formControlName="Addr" type="text" class="form-control">

感谢您的回复。

标签： javascriptangularfunctionangular-reactive-forms

解决方案

是的，您可以编写一个返回 formControl 对象的通用方法。

在您的.ts文件中，编写这样的函数。

getFormControl(controlName: string) {
    //return the formControl object of the respective 'controlName'
    return this.formName.get(controlName);
}

然后，在您的模板中

<input formControlName="accNum" type="text">
<span *ngIf="getFormControl('accNum').errors?.required">
    accNum can't be empty
</span>

<input formControlName="accName" type="text">
<span *ngIf="getFormControl('accName').errors?.required">
    accName can't be empty
</span>

推荐阅读