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

Question

美好的一天，这是我第一次在这里提出问题并且我对解决方案非常积极，在我的组件中，我在下面设置了一个角度反应形式和一些 getter（我称之为 lols）但它有点混乱，我的意思是这个表单控件实际上很多，请问有什么方法可以将这些 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">

Answer 1

是的，您可以编写一个返回 formControl 对象的通用方法。在您的.ts文件中，编写这样的函数。getFormControl(controlName: string) {&nbsp; &nbsp; //return the formControl object of the respective 'controlName'&nbsp; &nbsp; return this.formName.get(controlName);}然后，在您的模板中<input formControlName="accNum" type="text"><span *ngIf="getFormControl('accNum').errors?.required">&nbsp; &nbsp; accNum can't be empty</span><input formControlName="accName" type="text"><span *ngIf="getFormControl('accName').errors?.required">&nbsp; &nbsp; accName can't be empty</span>

Answer 2

像这样尝试：ngOnInit() {&nbsp; &nbsp; this.formName.valueChanges.subscribe(value => {&nbsp; &nbsp; &nbsp; Object.keys(this.formName.controls).forEach((key: string) => {&nbsp; &nbsp; &nbsp; &nbsp; console.log(this.formName.get(key).value);&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; });}