加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

Angular 2表单“无法找到路径控制”

发布时间:2020-12-17 07:53:56 所属栏目:安全 来源:网络整理
导读:我尝试制作一个动态表单(这样你就可以无限制地将项目添加到列表中),但不知何故我的列表内容没有得到发送,因为它无法找到带路径的控件: Cannot find control with path: ‘list_items - list_item’ 我的组件: @Component({ selector: 'app-list',templateU
我尝试制作一个动态表单(这样你就可以无限制地将项目添加到列表中),但不知何故我的列表内容没有得到发送,因为它无法找到带路径的控件:

Cannot find control with path: ‘list_items -> list_item’

我的组件:

@Component({
  selector: 'app-list',templateUrl: './list.component.html',styleUrls: ['./list.component.css']
})
export class ListComponent implements OnInit {

  listForm: FormGroup;

  constructor(private nodeService: NodeService,private messageService: MessageService,private fb: FormBuilder,private listService: ListService) { 
    this.listForm = this.fb.group({
      title: ['',[Validators.required,Validators.minLength(5)]],list_items: this.fb.array([
        this.initListItem(),])
    });
  }


  initListItem() {
    return this.fb.group({
      list_item: ['']
    });
  }
  initListItemType() {
    return this.fb.group({
      list_item_type: ['']
    });
  }

  addListItem() {
    const control = <FormArray>this.listForm.controls['list_items'];
    control.push(this.initListItem());
  }

模板(list.component.html):

<h2>Add List </h2>

<form [formGroup]="listForm" novalidate (ngSubmit)="addList(listForm)">
  <div class="form-group">
    <input type="text" class="form-control" formControlName="title" placeholder="Title">
  </div>

  <div formArrayName="list_items">
    <div *ngFor="let list_item of listForm.controls.list_items.controls; let i=index" class="panel panel-default">
      {{i + 1}}.) <input type="text" formControlName="list_item" placeholder="List Item" class="form-control">
    </div>
    <a (click)="addListItem()">Add List Item +</a>

  </div>

  <button type="submit">Submit</button>
</form>

标题工作正常,但我找不到我对“formControlName”的错误,这导致错误.

在此问题上提前感谢您的任何帮助.

更新我改变的内容
list.component.html

<h2>Add List </h2>

<form [formGroup]="listForm" novalidate (ngSubmit)="addList(listForm)">
  <div class="form-group">
    <input type="text" class="form-control" formControlName="title" placeholder="Title">
  </div>

  <div formArrayName="list_items">
    <div *ngFor="let list_item of listForm.controls.list_items.controls; let i=index" class="panel panel-default">
      {{i + 1}}.) <input type="text" formControlName="{{i}}" placeholder="List Item" class="form-control">
    </div>
    <a (click)="addListItem()">Add List Item +</a>

  </div>

  <button type="submit">Submit</button>
</form>

在我的组件中,我更改了构造函数和我的addListItem方法:

listForm: FormGroup;

  constructor(private nodeService: NodeService,list_items: this.fb.array([
          [''],])
    });
  }

  addListItem() {
    const control = <FormArray>this.listForm.controls['list_items'];
    control.push(this.fb.control(['']));
    console.log(control)
  }
应该以html格式映射formControlName&你的组件文件.
<div *ngFor="let list_item of [0,1,2]; let i=index" class="panel panel-default">

  {{i + 1}}.) <input type="text" formControlName='{{i}}' placeholder="List Item" class="form-control">
</div>

============

list_items: this.fb.array([
 [''],//0 points to this
 [''],//1 points to this
 ['']   //2 points to this
])

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读