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

為了賬號安全,請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

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

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

慕標(biāo)5832272 2019-10-09 16:59:18
這簡直是瘋狂,看起來沒有辦法讓其中一種輸入形式存在于子組件中。我已經(jīng)閱讀了所有博客和教程以及所有內(nèi)容,沒有辦法解決。問題是,當(dāng)子組件將具有任何形式的形式指令(ngModel,ngModelGroup或任何其他..)時,它將無法工作。這只是模板驅(qū)動形式中的一個問題這是個笨蛋: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)驗 獲得超6個贊

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


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


@Component({

 ...,

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

})

export class ChildComponent {}

Stackblitz示例


另請閱讀這篇文章,解釋其為何起作用。


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

更新資料


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


@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 {}


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

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

另一個可能的解決方法:


@Directive({

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

    providers: [

        {

            provide: ControlContainer,

            useFactory: function (form: NgForm) {

                return form;

            },

            deps: [NgForm]

        }

    ]

})

export class ProvideParentForm {}

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


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


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

添加回答

舉報

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號

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