错误：尚未向该组注册任何表单控件。如果您使用的是ngModel，则可能要检查下一个刻度（例如，使用setTimeout）

Question

我正在使用模板驱动的表单，并尝试根据某些对象属性设置表单元素的值，但是我面临以下问题 在这样做。这也是我的TD表单代码以及我如何尝试访问它。

.html文件：

<div class="row">
  <div class="col-xs-12">
    <form (ngSubmit)="onAddDevice(f)" #f="ngForm">
      <div class="row">
        <div class="col-sm-5 form-group">
          <label for="name">Name</label>
          <input type="text" id="name" class="form-control" name="name" ngModel required>
        </div>
        <div class="col-sm-2 form-group">
          <label for="type">Type</label>
          <input type="text" id="type" class="form-control" name="type" ngModel required>
        </div>
        <div class="col-sm-5 form-group">
          <label for="platform">Platform</label>
          <input type="text" id="platform" class="form-control" name="platform" ngModel required>
        </div>
        <div class="col-sm-2 form-group">
          <label for="udid">UDID</label>
          <input type="text" id="udid" class="form-control" name="udid" ngModel required>
        </div>
      </div>

      <div class="row">
        <div class="col-xs-12">
          <button class="btn btn-success" type="submit" [disabled]="!f.valid">Add</button>
          <button class="btn btn-danger" type="button">Delete</button>
          <button class="btn btn-primary" type="button">Clear</button>
        </div>
      </div>
    </form>
  </div>
</div>

.ts文件：

  @ViewChild('f') deviceForm: NgForm;
  @Output() deviceAdded = new EventEmitter<DeviceModel>();
  editedItemIndex: number;
  editedDevice: DeviceModel;

  constructor(private deviceService: DeviceService, private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.params
      .subscribe(
        (params: Params) =>{
            this.id = +params['id'];
            this.editMode = params['id'] != null;
            if ( this.editMode) {
              this.editedItemIndex = params['id'];
              this.editedDevice = this.deviceService.getDevice(params['id']);
              console.log(this.editedDevice.frame);
              this.deviceForm.setValue({
                name: this.editedDevice.name,
                platform: this.editedDevice.platform,
                type: this.editedDevice.type,
                udid: this.editedDevice.frame
              });
            }
        }
      );
  }

问题是因为在窗体上调用了setValue方法。

Answer 1

我遇到了同样的问题，我解决了这个问题（下面的代码片段使用了你的表单控件）：

this.deviceForm.form.patchValue({
    name: this.editedDevice.name,
    platform: this.editedDevice.platform,
    type: this.editedDevice.type,
    udid: this.editedDevice.frame
});

Answer 2

当您使用模板驱动的表单时，表单控件将不会在组件初始化时注册。由于错误消息建议使用setTimeout（），请按如下所示包装setvalue（），它将解决此问题。

 setTimeout(() => {
       this.deviceForm.setValue({
        name: this.editedDevice.name,
        platform: this.editedDevice.platform,
        type: this.editedDevice.type,
        udid: this.editedDevice.frame
      });
    }, );

希望能帮助到你...：）

Answer 3

你必须做类似的事情：

if(this.deviceForm.controls['name']){
        this.deviceForm.setValue({
            name: this.editedDevice.name,
            platform: this.editedDevice.platform,
            type: this.editedDevice.type,
            udid: this.editedDevice.frame
          });
      }