html - 如何访问 FormGroup 中的属性?我需要访问一些属性(触摸和错误)
问题描述
我有这个问题:“FormGroup”类型上不存在属性“institutionName”。
*ngIf="frmStepperControl.institutionName.touched && frmStepper.institutionName.errors?.required">
我的ts代码
import { Component, OnInit } from '@angular/core';
import { FormBuilder, Validators, AbstractControl, FormGroup, FormControl, FormArray} from '@angular/forms'
@Component({
selector: 'app-forms',
templateUrl: './forms.component.html',
styleUrls: ['./forms.component.scss']
})
export class FormsComponent implements OnInit {
frmValues: object = {};
frmStepper: FormGroup;
public get formArray(): AbstractControl {
// console.log(this.frmStepper.get('steps'));
return this.frmStepper.get('steps');
}
public get frmStepperControl(){
console.log(this.frmStepper.get('steps')['controls'].controls.institutionName);
return this.frmStepper.get('steps')['controls'];
}
constructor(private fb: FormBuilder) {
}
ngOnInit(): void {
this.frmStepper = this.fb.group({
steps: this.fb.array([
this.fb.group({
ieCode: [''],
institutionName: ['', Validators.compose([Validators.required])],
}),
this.fb.group({
telephone1: [null],
}),
])
});
}
submit(): void {
console.log(this.frmStepper.value.steps[0].institutionName);
//this.frmValues = this.frmStepper.value;
}
}
我的 html 代码,我试图从我的机构名称属性中访问 touched 和 errors 属性
<form [formGroup]="frmStepper" (ngSubmit)="submit()">
<timeline-stepper #cdkStepper formArrayName="steps" [linear]="true">
<cdk-step [editable]="false" formGroupName="0" [stepControl]="formArray.get([0])" class="form-cdk">
<div class="row">
<p>Instituição de ensino</p>
<div class="horizontal-divider"></div>
<div class="form-group col-md-6">
<label for="ieCode">Código da IE/IF</label>
<input formControlName="ieCode" type="text" class="form-control" id="ieCode" placeholder="Escreva aqui...">
</div>
<div class="form-group col-md-6">
<label for="institutionName">Nome da Instituição*</label>
<input formControlName="institutionName" type="text" class="form-control" id="institutionName"
placeholder="Escreva aqui..."
required>
<span class="text-danger"
*ngIf="frmStepperControl.institutionName.touched && frmStepper.institutionName.errors?.required">
Nome da Instituição é obrigatória
</span>
</div>
</div>
<footer class="row">
<div class="col-md-6"></div>
<div class="form-group col-md-3">
<button type="button" class="btn btn-primary next" cdkStepperNext>PRÓXIMO</button>
</div>
</footer>
</cdk-step>
<cdk-step #contacts [editable]="false" formGroupName="1" [stepControl]="formArray.get([1])">
<div class="row">
<div class="form-group col-md-6">
<label for="telephone1">Telef.1</label>
<input formControlName="telephone1" type="number" class="form-control" id="telephone1" placeholder="Escreva aqui.">
</div>
</div>
<footer class="row lastRow">
<div class="form-group col-md-3">
<button type="submit" class="btn btn-primary next">PRÓXIMO</button>
</div>
</footer>
</cdk-step>
</timeline-stepper>
</form>
类型“FormGroup”上不存在属性“机构名称”。我正面临这个问题。
解决方案
在你的 HTML 中,你有frmStepper.InstitutionName.errors
应该frmStepperControl.InstitutionName.errors
推荐阅读
- java - 如何将函数插入目录/哈希表
- java - 尝试将行添加到 DefaultTableModel 模型时出现 Java 空指针异常
- r - R - 计划比较中完全关闭的自由度(使用 afex - aov_ez - emmeans - 对)?
- linux - 如何在linux中使用单个命令调用程序?
- javascript - 带有增量的 IF 语句,并显示值
- node.js - 我可以使用 lambda:invoke 调用 AWS Lambda express 应用程序吗?
- regex - sed:匹配两行并插入一行
- ejabberd - 集群 ejabberd 的 MUC 和 PubSub 主机
- python - Python Websocket - ConnectionRefusedError:[Errno 111] 连接被拒绝
- c++ - 朋友,前向声明,C++