ng-pattern 不抛出错误

Question

几个小时以来一直在努力解决这个问题。想我会在这里问。

我有一个输入字段，我只想在有人尝试输入数字时显示一条消息。我的研究引导我使用 ng-pattern，但我似乎无法弄清楚为什么它对我不起作用。

  <input 
        type="string"  
        class="form-control" 
        [(ngModel)]="firstName"
        name ="firstName" 
        #studentFirstName ="ngModel"
        autocomplete="new-password" 
        autocomplete="off" 
        ng-pattern="/^[a-zA-Z\s]*$/"
        required>
        <div *ngIf="studentFirstName.invalid && (studentFirstName.dirty || studentFirstName.touched)" class="row">
            <div class="col-sm-12 text-danger">
              The form is invalid somewhere
            </div>
            <div *ngIf='studentFirstName.errors.required' class="col-sm-12 text-danger">
              First Name is required
            </div>
            <div *ngIf='studentFirstName.errors.pattern' class="col-sm-12 text-danger">
                First Name must not contain numbers
              </div>
        </div>

Answer 1

通过 Angular，您可以使用可用的 PatternValidator

<input 
        type="string"  
        class="form-control" 
        [(ngModel)]="firstName"
        name ="firstName" 
        #studentFirstName ="ngModel"
        autocomplete="new-password" 
        autocomplete="off" 
        pattern="/^[a-zA-Z\s]*$/" <-----------------pattern
        required>
        <div *ngIf="studentFirstName.invalid && (studentFirstName.dirty || studentFirstName.touched)" class="row">
            <div class="col-sm-12 text-danger">
              The form is invalid somewhere
            </div>
            <div *ngIf='studentFirstName.errors.required' class="col-sm-12 text-danger">
              First Name is required
            </div>
            <div *ngIf='studentFirstName.errors.pattern' class="col-sm-12 text-danger">
                First Name must not contain numbers
              </div>
        </div>

ng-pattern 不抛出错误

ng-pattern not thowing an error

validation

input

ng-pattern

angular