使用模板驱动形式在NgbDropdown中设置验证

时间:2019-08-01 12:00:42

标签: angular

我目前正在处理一种小型模板驱动的表单,其中有两个输入字段和一个下拉列表。对于下拉菜单,我使用了Ngbdropdown。我的问题是,我在提交时成功获取输入字段的值,但在提交时未获取所选下拉选项的值。我也想在下拉菜单中设置必填字段验证,但这也没有设置。我不知道该怎么办。请帮助。这是我的代码。

HTML代码:

<form #projectForm="ngForm">
                      <div class="modal-body p-0">
                          <div class="screen_row mb-4">
                              <div class="row">
                                  <div class="col-md-3 col-sm-3">
                                      <label>Screen Name</label>
                                  </div>
                                  <div class="col-md-9 col-sm-8 pl-0 pl-sm-3">
                                      <input type="text" class="form-control rounded-0" #screenName="ngModel"
                                      [(ngModel)]="screenname" name="screenname" required maxlength="50">
                                  </div>
                              </div>
                          </div>
                          <div class="screen_row mb-4">
                              <div class="row">
                                  <div class="col-md-3 col-sm-3">
                                      <label>Description</label>
                                  </div>
                                  <div class="col-md-9 col-sm-8 pl-0 pl-sm-3">
                                      <textarea class="form-control rounded-0" maxlength="500" #screenDescription="ngModel"
                                      [(ngModel)]="screendescription" name="screendescription" required></textarea>

                                  </div>
                              </div>
                          </div>

                          <div class="screen_row mb-4">
                              <div class="row">
                                  <div class="col-md-3 col-sm-3">
                                      <label>Start Slide</label>
                                  </div>
                                  <div class="col-md-9 col-sm-8 pl-0 pl-sm-3">
                                      <div placement="top" ngbDropdown class="d-inline-block custom_select max_custom_select">
                                            <button *ngIf="currentslideName" class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>{{currentslideName}}</button>
                                            <button *ngIf="!currentslideName" class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>Select Slide</button>
                                            <div ngbDropdownMenu aria-labelledby="dropdownBasic1" >
                                              <button (click)="ChangeSlideName(slide)" ngbDropdownItem *ngFor="let slide of slideList" >{{slide.name}}</button>
                                            </div>
                                          </div>
                                  </div>
                              </div>
                          </div>
                      </div>
                      <div class="footer_btn">
                          <button class="btn btn-primary mr-3" *ngIf="screenuuid">Delete Screen</button>
                          <button  class="btn btn-primary mr-0 float-right" (click)=onSubmit(projectForm)>Save</button>
                      </div>
                  </form>

0 个答案:

没有答案