如何将所需的验证应用于角度2的下拉列表

Question

我正在使用select html标签，我是绑定列表。如果未选择下拉列表并显示“选择”，则需要进行必要的验证。在标题上。

Answer 1

我使用了*ngIf语法，但您可以在下拉列表中提供验证，如：

<div class="form-group">
    <div>
        <label for="country">Country*:</label>
    </div>
    <div ng-class="{'valid':country.$valid}">
        <select class="form-control" name='country' [(ngModel)]='fd.country' required>
            <option *ngFor="let obj of country" [ngValue]="obj">{{obj}}</option>
        </select>
    </div>
    <small *ngIf="(myForm._submitted && !country.valid && !fd.country) || (!country.valid && country.dirty) ">Required (Please select country).</small>
</div>

Answer 2

=T.TEST()

＆＃13;

＆＃13;

<div class="form-group select-box">
  <select class="form-control select_style1" [(ngModel)]='car.model' formControlName='model' #model>
    <option value="" >Select Model</option>
    <option value="option1b">Option 1</option>
    <option value="option2b">Option 2</option>
    <option value="option3b">Option 3</option>
  </select>
  <span *ngIf="modelForm.get('model').hasError('required') && modelForm.get('model').touched" class='error' padding>Model is a required field.</span>
</div>

＆＃13;

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { NgForm, FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-index',
  templateUrl: './index.component.html',
  styleUrls: ['./index.component.css']
})
export class IndexComponent implements OnInit {
car: any={}
modelForm: FormGroup;
  constructor(public route: Router) {
    this.modelForm = new FormGroup({
      make: new FormControl('', [Validators.required]),
      model: new FormControl('', [Validators.required])

    })
   }

  ngOnInit() {
  }

  enterPin() {
    this.route.navigate(['enter-pin-code'])
  }
}

＆＃13;

＆＃13;

＆＃13;

Answer 3

这是通过角度使用选定属性的最佳方法

<select ng-model="group_id" required name="group" class="form-control">
   <option ng-repeat="data in globalScope.groups"
   ng-selected='globalScope.editPost.data.group_id'
   value="{{data.id}}">
   {{data.name}}</option>
</select>