Question

我的ngForm中有一个材料下拉列表，当我按需要设置此选项时，它旁边会显示一个星号*，但如果我不从下拉列表中选择任何选项，则表单被视为有效。

set in [open |$mycmd r]
fconfigure $in -blocking 0
fileevent $in readable [list handleFileEvent $in]
vwait ::forever

proc closePipe {f} {
    fconfigure $f -blocking true
    if {[catch {close $f} err]} {
        puts stderr $err
        set ::forever 1
    } else {
    set ::forever 1
    }
    }

proc handleFileEvent {f} {
    set status [catch { gets $f line } result]
    if { $status != 0 } {
        puts stderr $result
        closePipe $f
    } elseif { $result >= 0 } {
        puts stdout $line
    } elseif { [eof $f] } {
        closePipe $f
    } elseif { [fblocked $f] } {
        puts stdout $line
    }
}

这与我将材质输入设置为必需时会发生的情况不同，如果表格为空则会使表格无效。

<mat-form-field class="col-4 offset-1">
<mat-select placeholder="Some placeholder" [(value)]="data.name" required>
  <mat-option *ngFor="let name of names" [value]="name.value">
    name.viewValue
  </mat-option>
</mat-select>
</mat-form-field>

我更喜欢使用模板驱动的方法来解决这个问题而不是使用ReactiveForms（我找到了一些关于ReactiveForms的解决方案），有人可以帮助我吗？

注意：

我找到了一个类似标题的question，但它正在使用FormGroup（reactiveForms）

我举了一个例子来说明这个stackblitz

Answer 1

您已将required添加到选择的option，而不是select。这样做：

<mat-select placeholder="Favorite food" name="select" [(ngModel)]="select" required>
    <mat-option *ngFor="let food of foods" [value]="food.value" >
      {{ food.viewValue }}
    </mat-option>
  </mat-select>
</mat-form-field>

DEMO

Answer 2

根据优秀的answer（从0到英雄），我想澄清评论中提到的2点：

1-您必须使用 ngModel 而不是值

2-您必须为控件命名

完全归功于他，我想向任何像我这样的新人澄清这一点，因为我花了2个小时才发现它为什么不起作用

Angular 5材料：下拉（选择）所需的验证不起作用

2 个答案: