我正在创建一个用于编辑客户端的表单,但是由于某种原因,我遇到了很多错误。第一个错误是“错误:formGroup需要一个FormGroup实例。请传入一个。”。
然后我的HTML中的每个输入行都立即收到“ ERROR TypeError:无法读取未定义的属性'get'”。
我在另一个组件中使用了几乎相同的配置,并且工作正常,我不明白为什么这会引发错误。
this.myGroup = new FormGroup({
firstName: new FormControl()
});
<form [formGroup]="modifyClientForm" [ngClass]="{'view-only': inViewMode}" (ngSubmit)="modifyClient()">
<!--BLOCK 1: TAB 1 start-->
<div *ngIf="activeTab==='clientName'" class="white-bg">
<div class="form-row">
<div class="form-group col-12">
<label for="companyName">Ettevõtte nimi<span *ngIf="!inViewMode" class="required">*</span></label>
<input class="form-control" formControlName="companyName" name="companyName" id="companyName">
</div>
</div>
<div class="form-row">
<div class="form-group col-sm-12 col-md-6">
<label for="firmRegNo">Reg number<span *ngIf="!inViewMode" class="required">*</span></label>
<input formControlName="firmRegNo" class="form-control" name="firmRegNo" id="firmRegNo">
</div>
</div>
<div class="form-row">
<div class="form-group col-sm-12">
<label for="address">Aadress</label>
<input class="form-control" id="address" name="address" formControlName="address" >
</div>
</div>
<h4 class="form-title-mt">Kontakt</h4>
<div class="form-row">
<div class="form-group col-sm-12">
<label for="clientName">Kliendi nimi</label>
<input class="form-control" id="clientName" name="clientName" formControlName="clientName">
</div>
</div>
<div class="form-row">
<div class="form-group col-sm-6">
<label for="phoneOne">Telefon 1</label>
<input class="form-control" id="phoneOne" name="phoneOne" formControlName="phoneOne">
</div>
<div class="form-group col-sm-6">
<label for="phoneTwo">Telefon 2</label>
<input class="form-control" id="phoneTwo" name="phoneTwo" formControlName="phoneTwo" >
</div>
</div>
<div class="form-row">
<div class="form-group col-sm-12">
<label for="email">Email</label>
<input class="form-control" id="email" name="email" formControlName="email">
</div>
</div>
<div class="form-row mt-3">
<div class="form-group col-sm-12">
<label for="explanation">Selgitus</label>
<textarea class="form-control" id="explanation" name="explanation" placeholder="Hetkel puudub" formControlName="explanation"></textarea>
</div>
</div>
</div>
<!--BLOCK 1: TAB 1 end-->
<!--BLOCK 1: TAB 2 start-->
<div *ngIf="activeTab==='contract'" class="white-bg">
<app-client-contracts [activeClient]="activeClient"></app-client-contracts>
</div>
<!--BLOCK 1: TAB 2 end-->
<!--BLOCK 1: TAB 3 start-->
<div *ngIf="activeTab==='files'" class="white-bg">
<!-- Todo: kliendi failid -->
</div>
<!--BLOCK 1: TAB 3 end-->
打字稿:
modifyClientForm: FormGroup;
activeClient: Client;
constructor(private clientService: ClientService, private formBuilder: FormBuilder) { }
ngOnInit() {
this.inViewMode = true;
this.clientId = parseInt(window.location.pathname.split('/')[2], 10);
this.clientService.getClientById(this.clientId)
.subscribe(data => this.activeClient = data);
this.modifyClientForm = this.formBuilder.group({
companyName: [this.activeClient.companyName],
firmRegNo: [this.activeClient.firmRegNo],
address: [this.activeClient.address],
clientName: [this.activeClient.clientName],
phoneOne: [this.activeClient.phoneOne],
phoneTwo: [this.activeClient.phoneTwo],
email: [this.activeClient.email],
explanation: [this.activeClient.explanation]
});
}
答案 0 :(得分:0)
问题在于您的html在初始化表单组之前呈现。
您可以通过将表格放在div内并使用* ngIf来解决此问题:
<div *ngIf="modifyClientForm">
<form [formGroup]="modifyClientForm" [ngClass]="{'view-only': inViewMode}"
(ngSubmit)="modifyClient()">
....other code...
</form>
<div>
我希望这对某人有帮助!