Question

这里我有一个number类型的表单输入，但是无论何时提交表单而没有输入任何数字，它都会选择占位符文本“rating”作为值。我该如何防止它。

如果输入字段中没有输入

，我希望输入数字字段无效

以下是所有表格

   <section class="container">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">Add Movies</h3>
    </div>
    <div class="panel-body">
      <form (ngSubmit)="onSubmit(f)" #f="ngForm">
        <div class="form-group">
          <input type="text" class="form-control" id="movie-name" placeholder="Enter the Movie Name" ngModel name="movieName" required
            #name="ngModel" [ngClass]="{isValid: name.valid && name.touched, isInvalid: !name.valid && name.touched}">
        </div>
        <div class="form-group col-md-1">
          <input type="number" class="form-control" name="rating" min="1" max="5" placeholder="Rating" size="15" ngModel="rating" required 
            #rating="ngModel" [ngClass]="{isValid: rating.valid && rating.touched, isInvalid: !rating.valid && rating.touched}">
        </div>
        <div class="form-group">
          <input type="date" class="form-control" id="release-date" placeholder="Release Date" ngModel name="releaseDate" required 
          #releaseDate="ngModel" [ngClass]="{isValid: releaseDate.valid && releaseDate.touched, isInvalid: !releaseDate.valid && releaseDate.touched}">
        </div>
        <div class="form-group">
          <input type="text" class="form-control" id="movie-description" placeholder="Enter the description of the Movie" ngModel name="movieDescription"
            required #description="ngModel" [ngClass]="{isValid: description.valid && description.touched, isInvalid: !description.valid && description.touched}">
        </div>
        <p class="help-block alert alert-info text-center">By submitting the data, you agree to our Terms and that you have read our Data Use Policy, including our Cookie Use.
        </p>
        <button type="submit" class="btn btn-default btn-block" [disabled]="!f.valid">Submit</button>
      </form>
    </div>
  </div>
</section>

Answer 1

以下内容应该有效：

<input type="number" class="form-control" name="rating" min="1" max="5" placeholder="Rating" [(ngModel)]="yourmodelfield" required [ngClass]="{isValid: rating.valid && rating.touched, isInvalid: !rating.valid && rating.touched}">

使用Two way data binding

数字输入将占位符字符串作为值

1 个答案: