Question

我使用ngModel banana-binding设计了以下表单，点击提交按钮我可以获得所有控件的值，除了下拉控件。此外，我无法为所有使用的单选按钮提供默认选择选项，与下拉控件的情况相同。

我在mediacript文件中将mediaModel定义为json对象，并在ngModel中使用它来获取提交按钮上所有控件的值。

任何人都可以帮我解决这个问题。由于我在UI设计方面非常糟糕，我无法找到此问题的根本原因。

<li>
      <div class="collapsible-header active">
        <b style="font-size: 15px;">Media Settings</b>
      </div>
      <div class="collapsible-body">

        <div class="container">
          <div class="row ">
            <!-- <form class="col s12" [formGroup]="mediaSettingsForm" id="mediaSettingsForm" novalidate (ngSubmit)="submitMediaSettings(mediaSettingsForm.value, mediaSettingsForm.valid)"> -->
            <!-- <form> -->

            <div class="row" style="margin-bottom: 0px">
              <div class="input-field col m6 s12">
                <div class="form-group input-field">
                  <label>Disable Touch Screen</label>
                </div>
              </div>
              <div class="input-field col m6 s12">
                <div class="form-group input-field">
                  <input class="with-gap" name="disable_touch_screen" [(ngModel)]="mediaModel.disable_touch_screen" #disable_touch_screen="ngModel"
                    value="On" type="radio" id="disable_touch_screen_on" [checked]="checkFlag" />
                  <label for="disable_touch_screen_on">On</label>
                  <input class="with-gap" name="disable_touch_screen" [(ngModel)]="mediaModel.disable_touch_screen" #disable_touch_screen="ngModel"
                    value="Off" type="radio" id="disable_touch_screen_off" />
                  <label for="disable_touch_screen_off">Off</label>
                </div>
              </div>
              <div class="row"></div>
              <div class="input-field col m6 s12">
                <div class="form-group input-field">
                  <label>RTP Call Assurance</label>
                </div>
              </div>
              <div class="input-field col m6 s12">
                <div class="form-group input-field">
                  <input class="with-gap" name="rtp_call_assurance" [(ngModel)]="mediaModel.rtp_call_assurance" #rtp_call_assurance="ngModel"
                    value="On" type="radio" id="rtp_call_assurance_on" checked />
                  <label for="rtp_call_assurance_on">On</label>
                  <input class="with-gap" name="rtp_call_assurance" [(ngModel)]="mediaModel.rtp_call_assurance" #rtp_call_assurance="ngModel"
                    value="Off" type="radio" id="rtp_call_assurance_off" />
                  <label for="rtp_call_assurance_off">Off</label>
                </div>
              </div>

              <div class="input-field col m6 s12">
                <div class="form-group input-field">
                  <label>Use Internal speaker/mic</label>
                </div>
              </div>
              <div class="input-field col m6 s12">
                <div class="form-group input-field">
                  <input class="with-gap" name="use_internal_speaker_mic" [(ngModel)]="mediaModel.use_internal_speaker_mic" #use_internal_speaker_mic="ngModel"
                    value="On" type="radio" id="use_internal_speaker_mic_on" checked />
                  <label for="use_internal_speaker_mic_on">On</label>
                  <input class="with-gap" name="use_internal_speaker_mic" [(ngModel)]="mediaModel.use_internal_speaker_mic" #use_internal_speaker_mic="ngModel"
                    value="Off" type="radio" id="use_internal_speaker_mic_off" />
                  <label for="use_internal_speaker_mic_off">Off</label>
                </div>
              </div>
            </div>

            <div class="row">
              <div class="input-field col m6 s12">
                <div class="form-group input-field">
                  <!-- <select class="form-control browser-default" [(ngModel)]="mediaModel.device_type" style="display:block;">
                    <option value="default" disabled selected>Select Device</option>
                    <option value="ANDROID">Android</option>
                    <option value="IOS">iOS</option>                    
                  </select>      -->
                  <select class="form-control browser-default" style="display:block;" [(ngModel)]="mediaModel.device_type">
                    <option value="default" disabled selected>Select Device</option>
                    <option [ngValue]="ANDROID">Android</option>
                    <option [ngValue]="IOS">iOS</option>
                  </select>
                </div>
              </div>
            </div>
            <button type="submit" class="btn btn-default input-field color-blue" (click)="saveMediaSettings()">Save</button>
          </div>
        </div>
      </div>
    </li>

Answer 1

您的代码唯一的问题是$exception->statusCode

将[ngValue]="ANDROID"更改为[ngValue]或ngValue。

注意：

如果你使用[]属性，那么右边总是一个   表达，

所以要么你可以使用：

value或[attr]='expression'

但在你的情况下，它只是简单的字符串，所以你可以使用   attr='{{ expression }}'

<强> For More Detail

Answer 2

让我们在html部分粘贴代码：

  <select class="form-control browser-default" style="display:block;"
                      [(ngModel)]="mediaModel.device_type">
                <option  disabled selected>Select Device</option>
                <option *ngFor="let eachDevice of devices" 
                [ngValue]="eachDevice.name">{{eachDevice.name}}</option>
   </select>

并在ts文件中粘贴代码

devices: any = [{name: 'Android'}, {name: 'IOS'}];

下拉提交给出undefined - Angular4

2 个答案: