相关疑难解决方法(0)

这只是疯狂,看起来没有办法让一个表单中的一个输入在子组件中.

我已阅读所有博客和教程以及所有内容,无法解决这个问题.

问题是当一个子组件要有任何形式的指令(ngModel,ngModelGroup或其他......)时,它不会工作.

这只是模板驱动表单中的一个问题

这是plunker:

import { Component } from '@angular/core';

@Component({
  selector: 'child-form-component',
  template: ` 
  <fieldset ngModelGroup="address">
    <div>
      <label>Street:</label>
      <input type="text" name="street" ngModel>
    </div>
    <div>
      <label>Zip:</label>
      <input type="text" name="zip" ngModel>
    </div>
    <div>
      <label>City:</label>
      <input type="text" name="city" ngModel>
    </div>
  </fieldset>`
})

export class childFormComponent{


}

@Component({
  selector: 'form-component',
  directives:[childFormComponent],
  template: `
    <form #form="ngForm" (ngSubmit)="submit(form.value)">
      <fieldset ngModelGroup="name">
        <div>
          <label>Firstname:</label>
          <input type="text" name="firstname" ngModel>
        </div>
        <div>
          <label>Lastname:</label>
          <input type="text" name="lastname" ngModel>
        </div>
      </fieldset>

      <child-form-component></child-form-component>

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

    <pre>
      {{form.value | …

这是标签代码:

import {Directive} from '@angular/core';

@Directive({
  selector: '[ngbButtonLabel]',
  host:
      {'[class.btn]': 'true', '[class.active]': 'active', '[class.disabled]': 'disabled', '[class.focus]': 'focused'}
})
export class NgbButtonLabel {
  active: boolean;
  disabled: boolean;
  focused: boolean;
}

这是单选按钮代码:

import {Directive, forwardRef, Input, Renderer2, ElementRef, OnDestroy} from '@angular/core';
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';

import {NgbButtonLabel} from './label';

const NGB_RADIO_VALUE_ACCESSOR = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => NgbRadioGroup),
  multi: true
};

let nextId = 0;

/**
 * Easily create Bootstrap-style radio buttons. A value of a selected button is bound …

编辑：我发现是什么原因引起的问题；我现在正在寻找一种解决方案，以解决这一问题。

注意：此问题在开发人员模式下发生（即，不是prod，并且未使用aot）

我从这里使用“更新”解决方案：

/sf/answers/3242683041/

解决子组件中的输入未更新表单上的有效标志的问题。它可以在一个相当简单的测试项目中工作，但是当将其移至我们的真实项目时，会引发以下错误：

core.es5.js:1020 ERROR Error: Uncaught (in promise): Error: No provider for NgForm!
Error: No provider for NgForm!
    at ZoneAwareError (http://192.168.2.34:4200/vendor.bundle.js:153804:33)
    at injectionError (http://192.168.2.34:4200/vendor.bundle.js:1378:90)
    at noProviderError (http://192.168.2.34:4200/vendor.bundle.js:1416:12)
    at ReflectiveInjector_._throwOrNull (http://192.168.2.34:4200/vendor.bundle.js:2858:19)
    at ReflectiveInjector_._getByKeyDefault (http://192.168.2.34:4200/vendor.bundle.js:2897:25)
    at ReflectiveInjector_._getByKey (http://192.168.2.34:4200/vendor.bundle.js:2829:25)
    at ReflectiveInjector_.get (http://192.168.2.34:4200/vendor.bundle.js:2698:21)
    at resolveNgModuleDep (http://192.168.2.34:4200/vendor.bundle.js:9701:25)
    at NgModuleRef_.get (http://192.168.2.34:4200/vendor.bundle.js:10771:16)
    at resolveDep (http://192.168.2.34:4200/vendor.bundle.js:11259:45)
    at _createProviderInstance (http://192.168.2.34:4200/vendor.bundle.js:11102:20)
    at resolveDep (http://192.168.2.34:4200/vendor.bundle.js:11238:56)
    at createClass (http://192.168.2.34:4200/vendor.bundle.js:11129:32)
    at createDirectiveInstance (http://192.168.2.34:4200/vendor.bundle.js:10960:37)
    at createViewNodes (http://192.168.2.34:4200/vendor.bundle.js:12401:53)
    at ZoneAwareError (http://192.168.2.34:4200/vendor.bundle.js:153804:33)
    at injectionError (http://192.168.2.34:4200/vendor.bundle.js:1378:90)
    at noProviderError (http://192.168.2.34:4200/vendor.bundle.js:1416:12)
    at ReflectiveInjector_._throwOrNull (http://192.168.2.34:4200/vendor.bundle.js:2858:19) …