首页 文章

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

提问于
浏览 次
2

在创建模型驱动表单时，我收到错误： Error: formControlName must be used with a parent formGroup directive. You'll want to add a formGroup directive and pass it an existing FormGroup instance (you can create one in your class).

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

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 angular2-template angular2-forms angular2-directives

2 回答

  • 5

    Angular正在任何父元素上等待 FormGroupDirective . 所以：

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

    如果你想使用没有 formGroup 的 FormControl ，你可以改用 FormControlDirective ：

    <input [formControl]="name"
...
<input [formControl]="abstract"
    回复于
  • 0

    首先，您必须指定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>
    回复于

相关问题