有什么方法可以找到 FormControl 是否在角度上是只读的

Question

我的角度应用程序中有一个表单控件。

const name = new FormControl('vikram');

和我的模板

<input type="text" formControlName="name" name="name" id="name" [attr.readonly]="true"/>

我的组件中有什么方法可以查明此控件是否只读？

Answer 1

试试这个：

网页格式

<input type="text" #nameCtrl formControlName="name" name="name" id="name" [attr.readonly]="true"/>

TS

...
      @ViewChild('nameCtrl', {static : true}) nameCtrl : ElementRef ;

      ngAfterViewInit(){
        console.log(this.nameCtrl.nativeElement.getAttribute('readOnly')) ;
      }
...

更新

实现此目的的解决方法是在您的 ts 中添加一个变量，其中包含每个控件的 readOnly 属性：

TS

readOnlyFlags = {} ;

网页格式

<input type="text" [formControl]="name" name="name" id="name" [attr.readonly]="readOnlyFlags['name'] = true" />

<input type="text" [formControl]="dob" name="dob" id="dob" [attr.readonly]="readOnlyFlags['dob'] = false" />
...

结果，您的 readOnlyFlags 将如下所示：

{
  name : true,
  dob : false
}

最后，您检查每个表单控件的 readOnly 属性，如下所示：

readOnlyFlags['control_name']

Answer 2

您可以使用 ViewChildren 获取组件中的所有“formControls”

@ViewChildren(NgControl,{read:ElementRef}) controls:QueryList<ElementRef>

并特别按属性“名称”搜索一个，例如

  const control=this.controls.find(x=>x.nativeElement.getAttribute('name')=='name')
  return control?control.nativeElement.getAttribute('value'):null

无论如何，对我来说是一个奇怪的问题。 通常你使用[attr.readonly]="variable" ，所以你只需要询问变量。 您可以获得表单中任何控件的值，如this.myform.get('nameOfFomControl').value并且如果禁用控件并且您需要该值，请使用this.myform.getRawValue()