第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

Angular2嵌套模板驅(qū)動(dòng)形式

Angular2嵌套模板驅(qū)動(dòng)形式

慕標(biāo)5832272 2019-10-09 16:59:18
這簡(jiǎn)直是瘋狂,看起來沒有辦法讓其中一種輸入形式存在于子組件中。我已經(jīng)閱讀了所有博客和教程以及所有內(nèi)容,沒有辦法解決。問題是,當(dāng)子組件將具有任何形式的形式指令(ngModel,ngModelGroup或任何其他..)時(shí),它將無法工作。這只是模板驅(qū)動(dòng)形式中的一個(gè)問題這是個(gè)笨蛋: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 | json}}    </pre>    <h4>Submitted</h4>    <pre>          {{value | json }}    </pre>  `})export class FormComponent {  value: any;  submit(form) {    this.value = form;   }}
查看完整描述

3 回答

?
哈士奇WWW

TA貢獻(xiàn)1799條經(jīng)驗(yàn) 獲得超6個(gè)贊

一個(gè)簡(jiǎn)單的解決方案是提供ControlContainer在viewProviders像你的孩子組成的數(shù)組:


import { ControlContainer, NgForm } from '@angular/forms';


@Component({

 ...,

 viewProviders: [ { provide: ControlContainer, useExisting: NgForm } ]

})

export class ChildComponent {}

Stackblitz示例


另請(qǐng)閱讀這篇文章,解釋其為何起作用。


Angular:嵌套模板驅(qū)動(dòng)形式

更新資料


如果您正在尋找嵌套模型驅(qū)動(dòng)的表單,那么這里是類似的方法:


@Component({

  selector: 'my-form-child',

  template: `<input formControlName="age">`,

  viewProviders: [

    {

      provide: ControlContainer,

      useExisting: FormGroupDirective

    }

  ]

})

export class ChildComponent {

  constructor(private parent: FormGroupDirective) {}


  ngOnInit() {

    this.parent.form.addControl('age', new FormControl('', Validators.required))

  }

}

Ng運(yùn)行示例


更新2

如果您不知道確切的ControlContainer包裝類型是您的自定義組件(例如,控件位于FormArray指令內(nèi)),則只需使用通用版本:


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

import { ControlContainer} from '@angular/forms';


@Component({

 ...,

 viewProviders: [{

   provide: ControlContainer,

   useFactory: (container: ControlContainer) => container,

   deps: [[new SkipSelf(), ControlContainer]],

 }]

})

export class ChildComponent {}


查看完整回答
反對(duì) 回復(fù) 2019-10-09
?
偶然的你

TA貢獻(xiàn)1841條經(jīng)驗(yàn) 獲得超3個(gè)贊

另一個(gè)可能的解決方法:


@Directive({

    selector: '[provide-parent-form]',

    providers: [

        {

            provide: ControlContainer,

            useFactory: function (form: NgForm) {

                return form;

            },

            deps: [NgForm]

        }

    ]

})

export class ProvideParentForm {}

只需將此指令放在子組件中節(jié)點(diǎn)層次結(jié)構(gòu)頂部的某個(gè)位置(在任何ngModel之前)。


工作原理:NgModel 使用@Host()限定父窗體的依賴關(guān)系查找。因此,父組件中的表單對(duì)于子組件中的NgModel不可見。但是我們可以使用上面演示的代碼將其注入并提供給子組件。


查看完整回答
反對(duì) 回復(fù) 2019-10-09
  • 3 回答
  • 0 關(guān)注
  • 774 瀏覽

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)