angular - Angular 2 TD 表单无法将值或补丁值设置为跨标签、按钮

Question

我有一个简单的角度模板驱动表单，输入、跨度标签和按钮很少。我需要 setValue 从组件中的对象形成。

我无法将值设置为跨度和按钮标签，并且出现以下错误。

core.js:1365 ERROR Error: Uncaught (in promise): Error: No value accessor for form control with path: 'userSettings -> id'
Error: No value accessor for form control with path: 'userSettings -> id'
  at _throwError (forms.js:1901)
  at setUpControl (forms.js:1771)
  at resolvedPromise.then (forms.js:3851)
  at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388)
  at Object.onInvoke (core.js:3988)
  at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:387)
  at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:138)
  at zone.js:870
  at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
  at Object.onInvokeTask (core.js:3979)
  at _throwError (forms.js:1901)
  at setUpControl (forms.js:1771)
  at resolvedPromise.then (forms.js:3851)
  at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388)
  at Object.onInvoke (core.js:3988)
  at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:387)
  at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:138)
  at zone.js:870
  at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
  at Object.onInvokeTask (core.js:3979)
  at resolvePromise (zone.js:821)
  at zone.js:873
  at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
  at Object.onInvokeTask (core.js:3979)
  at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
  at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
  at drainMicroTaskQueue (zone.js:594)
  at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:499)
  at invokeTask (zone.js:1536)
  at HTMLAnchorElement.globalZoneAwareCallback (zone.js:1562)

我的表单html代码

<form class="form-horizontal" role="form" (ngSubmit)="onSettingUpdateSubmit()" #settingsForm="ngForm" >
<fieldset ngModelGroup="userSettings">
  <legend><strong>Account Settings</strong></legend>
  <br>

  <div class="form-group row">
    <label class="col-md-3  col-form-label text-md-right">Id</label>
    <div class="col-md-4">
      <span class="fw-semi-bold" [ngModel]="id" id="id" name="id">{{ id }}</span>
    </div>
  </div>

  <div class="form-group row">
    <label for="firstName" class="col-md-3  col-form-label text-md-right">First Name</label>
    <div class="col-md-4">
      <input type="text"
             id="firstName"
             required
             [ngModel]="firstName"
             name="firstName"
             class="form-control"
             placeholder="Your first name">
    </div>
  </div>

  <div class="form-group row">
    <label class="col-md-3  col-form-label text-md-right">Active</label>
    <div class="col-md-4">
      <button type="button"
              id="active"
              [value]="active"
              [ngModel]="active"
              name="active"
              [ngClass]="active ? 'btn btn-success' : 'btn btn-danger'"
              (click)="onActiveMode()">{{ active ? 'Yes' : 'No'}}</button>
    </div>
  </div>
</fieldset>

<div class="form-actions">
  <div class="btn-block text-center">
    <button type="submit"
            class="btn btn-primary"

            [disabled]=!settingsForm.valid>Update</button>
  </div>
</div>

我组件中的 settingsService 将从我的 API 返回一个对象，如下所示。

{
    "id":"12345",
    "firstName":"Victor",
    "active":true
}

我的 settings.component.ts

export class SettingsComponent implements OnInit {

 ngOnInit() {
      this.settingsService.getUserSettings('12345')
         .subscribe(
               (response: UserSettings) => {

                    console.log(response);

                    // this.settingForm.setValue({
                    //   userSettings: response
                    // });

                    this.settingForm.form.patchValue({
                       userSettings: response
                    });
                },
                (error) => console.log(error)
             );
           }

 onSettingUpdateSubmit() {
     console.log(this.settingForm.value.userSettings);
 }
}

当我单击表单中的更新按钮时，它会返回所有带有值的完整对象（在我的组件中预设用于测试目的）。

标签： angulartypescriptangular2-forms

Answer 1

看起来您正在将一些模板驱动的表单语法与反应式表单语法混合在一起，但它不起作用。

这是我的模板驱动表单控件之一的示例：

  <div class="form-group row">
    <label class="col-md-2 col-form-label"
           for="firstNameId">First Name</label>
    <div class="col-md-8">
      <input class="form-control"
             id="firstNameId"
             type="text"
             placeholder="First Name (required)"
             required
             minlength="3"
             [(ngModel)]=customer.firstName
             name="firstName"
             #firstNameVar="ngModel"
             [ngClass]="{'is-invalid': (firstNameVar.touched || firstNameVar.dirty) && !firstNameVar.valid }" />
      <span class="invalid-feedback">
        <span *ngIf="firstNameVar.errors?.required">
          Please enter your first name.
        </span>
        <span *ngIf="firstNameVar.errors?.minlength">
          The first name must be longer than 3 characters.
        </span>
      </span>
    </div>
  </div>

请注意，它使用双向绑定：[(ngModel)]=customer.firstName

它绑定到客户对象的 firstName 属性。在您的情况下，您需要定义一个user对象。像这样的东西：

export class SettingsComponent implements OnInit {
     user: UserSettings;

     ngOnInit() {
          this.settingsService.getUserSettings('12345')
             .subscribe(
                   (response: UserSettings) => {
                        console.log(response);
                        this.user = response;
                    },
                    (error) => console.log(error)
                 );
               }

     onSettingUpdateSubmit() {
         console.log(this.settingForm.value.userSettings);
     }
    }

还有你的 HTML：

[(ngModel)]="user.firstName"

这将使用从您的设置服务中检索到的值自动填充您的表单。

我在这里有一个完整的例子：https ://github.com/DeborahK/Angular2-ReactiveForms/tree/master/Demo-Start-Updated