Question

我想知道是否有任何方法可以检索从其所属表单的NgModel对象中提取的FormControl NgForm.controls，或者直接从表单中检索NgModel。

我有一个表单，在提交后，我将参数传递给我定义的函数：

<form #myForm="ngForm" name="myForm" (ngSubmit)="myFunc(myForm)">
  <input type="text" name="myInput" ngModel #myInput="ngModel">
</form>

myFunc(form) {
  form.controls // Gets me {[key: string]: FormControl}
}

我希望能够将属性设置为从表单中检索到的控件（如NgModel s），并在模板中引用它们：

{{ myInput.myProp }}

而不是：

{{ myInput.control.myProp }}

总体目标是在表单提交时为表单的每个NgModel设置一个自定义属性，而不必从其底层控件中提取该属性。这是可能的和/或我是否只是以错误的方式解决它？

Answer 1

试试这个：

<form #myForm="ngForm" name="myForm" (ngSubmit)="myFunc(myForm)">
  <input type="text" name="myInput" ngModel #inp="ngModel">
  {{ inp.value }}
</form>

Answer 2

#myInput="ngModel"将获取ngModel，以访问您需要其他模板变量的本机元素#myInp

<form #myForm="ngForm" name="myForm" (ngSubmit)="myFunc(myForm)">
  <input #myInp type="text" name="myInput" ngModel #myInput="ngModel">
  {{myInp.getAttribute("my-attr")}}
</form>

您可以这样设置自定义属性值：

@ViewChild("myInp") myInput: ElementRef;
myFunc(form) { 
    this.myInput.nativeElement.setAttribute('my-attr', 'attr: ' + form.value.myInput);
}

从NgForm中检索NgModel

2 个答案: