[英]formControlName must be used with a parent formGroup directive
While creating model driven form, i am getting an error: Error: formControlName must be used with a parent formGroup directive.在创建模型驱动表单时,我收到一个错误:错误:formControlName 必须与父 formGroup 指令一起使用。 You'll want to add a formGroup directive and pass it an existing FormGroup instance (you can create one in your class).
您需要添加一个 formGroup 指令并将其传递给现有的 FormGroup 实例(您可以在类中创建一个)。
Please tell me whats going wrong in this code.请告诉我这段代码出了什么问题。
app.component.html
应用程序组件.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
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 is waiting for FormGroupDirective
on any of parent elements. Angular 正在等待任何父元素上的
FormGroupDirective
。 So:所以:
<form [formGroup]="newSessionForm" ...
<input formControlName="name"
...
<input formControlName="abstract"
If you want to use FormControl
without formGroup
you can use FormControlDirective
instead:如果你想在没有
formGroup
情况下使用FormControl
你可以使用FormControlDirective
代替:
<input [formControl]="name"
...
<input [formControl]="abstract"
If your FormGroup is in a parent component, and Form control in a child component, you have to declare viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] in the child component like this:如果您的 FormGroup 在父组件中,而 Form 控件在子组件中,则必须在子组件中声明 viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }] ,如下所示:
@Component({
selector: 'child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.css'],
viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }]
})
export class ChildComponent implements OnInit {
...
Can u try this way你可以试试这种方式吗
<div class="col-md-12" formArrayName="educations">
</div>
ts file code .ts 文件代码
educations: this.formBuilder.array([]),
Or或者
<form [formGroup]="manageOrderForm">
</form>
ts file code .ts 文件代码
import { Router } from '@angular/router';
@Component({
selector: 'app-order',
templateUrl: './order.component.html',
styleUrls: ['./order.component.css']
})
export class OrderComponent implements OnInit {
manageOrderForm: any;
}
First you have to specify the formGroup , which one is going to drive the form controls binded with the inputs.首先,您必须指定 formGroup ,哪个将驱动与输入绑定的表单控件。
<form [formGroup]="newSessionForm" (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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.