javascript - How does standalone form control in ModelOptions affect form values - Stack Overflow

admin管理员组

文章数量:1023849

       <div id="resort-data" 
            ngModelGroup="resortData" 
            #resortData="ngModelGroup">
            <div class="row">
                <div class="text">Kod resortowy I:</div>
                <div class="data">
                    <underline-input id="resI" 
                       #resI="ngModel" 
                       [(ngModel)]="thispany.i_kod" 
                       name="resI" placeholder="Kod resortowy I" 
                       [ngModelOptions]="{standalone: true}">
                    </underline-input>
                </div>
            </div>
        </div>

If I use [ngModelOptions]="{standalone: true}" input and

{{f.value | json}}

is displayed that resortData is empty object if i remove [ngModelOptions]="{standalone: true}" that "resortData": { "resI": "valueFromInput" } } form is working and validation also working fine why this is happening ?

       <div id="resort-data" 
            ngModelGroup="resortData" 
            #resortData="ngModelGroup">
            <div class="row">
                <div class="text">Kod resortowy I:</div>
                <div class="data">
                    <underline-input id="resI" 
                       #resI="ngModel" 
                       [(ngModel)]="this.pany.i_kod" 
                       name="resI" placeholder="Kod resortowy I" 
                       [ngModelOptions]="{standalone: true}">
                    </underline-input>
                </div>
            </div>
        </div>

If I use [ngModelOptions]="{standalone: true}" input and

{{f.value | json}}

is displayed that resortData is empty object if i remove [ngModelOptions]="{standalone: true}" that "resortData": { "resI": "valueFromInput" } } form is working and validation also working fine why this is happening ?

• javascript
• html
• angular
• validation

Share Improve this question Follow edited Sep 4, 2017 at 11:43 Max Koretskyi 106k6868 gold badges353353 silver badges516516 bronze badges asked Sep 4, 2017 at 11:30 Walter WhiteWalter White 1,02444 gold badges1414 silver badges3434 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

The standalone:true option means that ngModel directive should not register the formControl it creates within the wrapping formGroup. Here is the relevant sources from the ngModel directive:

export class NgModel extends NgControl implements OnChanges,
      ...
      private _setUpControl(): void {
        this._setUpdateStrategy();
        this._isStandalone() ? this._setUpStandalone() :
                               this.formDirective.addControl(this); <--- is not called
        this._registered = true;
      }

Hence if you try to output all form controls here:

{{f.value | json}}

the form doesn't contain the control you pass as standalone.

       <div id="resort-data" 
            ngModelGroup="resortData" 
            #resortData="ngModelGroup">
            <div class="row">
                <div class="text">Kod resortowy I:</div>
                <div class="data">
                    <underline-input id="resI" 
                       #resI="ngModel" 
                       [(ngModel)]="thispany.i_kod" 
                       name="resI" placeholder="Kod resortowy I" 
                       [ngModelOptions]="{standalone: true}">
                    </underline-input>
                </div>
            </div>
        </div>

If I use [ngModelOptions]="{standalone: true}" input and

{{f.value | json}}

is displayed that resortData is empty object if i remove [ngModelOptions]="{standalone: true}" that "resortData": { "resI": "valueFromInput" } } form is working and validation also working fine why this is happening ?

       <div id="resort-data" 
            ngModelGroup="resortData" 
            #resortData="ngModelGroup">
            <div class="row">
                <div class="text">Kod resortowy I:</div>
                <div class="data">
                    <underline-input id="resI" 
                       #resI="ngModel" 
                       [(ngModel)]="this.pany.i_kod" 
                       name="resI" placeholder="Kod resortowy I" 
                       [ngModelOptions]="{standalone: true}">
                    </underline-input>
                </div>
            </div>
        </div>

If I use [ngModelOptions]="{standalone: true}" input and

{{f.value | json}}

is displayed that resortData is empty object if i remove [ngModelOptions]="{standalone: true}" that "resortData": { "resI": "valueFromInput" } } form is working and validation also working fine why this is happening ?

• javascript
• html
• angular
• validation

Share Improve this question Follow edited Sep 4, 2017 at 11:43 Max Koretskyi 106k6868 gold badges353353 silver badges516516 bronze badges asked Sep 4, 2017 at 11:30 Walter WhiteWalter White 1,02444 gold badges1414 silver badges3434 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

The standalone:true option means that ngModel directive should not register the formControl it creates within the wrapping formGroup. Here is the relevant sources from the ngModel directive:

export class NgModel extends NgControl implements OnChanges,
      ...
      private _setUpControl(): void {
        this._setUpdateStrategy();
        this._isStandalone() ? this._setUpStandalone() :
                               this.formDirective.addControl(this); <--- is not called
        this._registered = true;
      }

Hence if you try to output all form controls here:

{{f.value | json}}

the form doesn't contain the control you pass as standalone.

本文标签： javascriptHow does standalone form control in ModelOptions affect form valuesStack Overflow