gpt4 book ai didi

angular - formControlName 必须与父 formGroup 指令一起使用

转载 作者:行者123 更新时间:2023-12-03 15:22:08 26 4
gpt4 key购买 nike

在创建模型驱动表单时,我收到一个错误:错误:formControlName 必须与父 formGroup 指令一起使用。您需要添加一个 formGroup
指令并将其传递给现有的 FormGroup 实例(您可以在类中创建一个)。


请告诉我这段代码出了什么问题。

app.component.html


<div class="col-md-6">
<form (ngSubmit)="saveSession(newSessionForm.value)" autocomplete="off">
<div class="form-group">
<label for="sessionName">Session Name:</label>
<input formControlName="name" id="sessionName" type="text" class="form-control" placeholder="session name..." />
</div>
<div class="form-group">
<label for="abstract">Abstract:</label>
<textarea formControlName="abstract" id="abstract" rows=3 class="form-control" placeholder="abstract..."></textarea>
</div>
<button type="submit" class="btn btn-primary">Save</button>
</form>
</div>

app.component.ts


export class CreateSession {

newSessionForm:FormGroup;
abstract : FormControl;
name : FormControl;

ngOInInit(){
this.name = new FormControl('', Validators.required)
this.abstract = new FormControl('', Validators.required)

this.newSessionForm = new FormGroup({
name:this.name,
abstract: this.abstract
})
}


saveSession(formValues){
console.log(formValues);
}

最佳答案

Angular 正在等待 FormGroupDirective在任何父元素上。所以:

<form [formGroup]="newSessionForm" ...
<input formControlName="name"
...
<input formControlName="abstract"

如果您想使用 FormControl没有 formGroup您可以使用 FormControlDirective反而:

<input [formControl]="name"
...
<input [formControl]="abstract"

关于angular - formControlName 必须与父 formGroup 指令一起使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45822266/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com