Question

我想添加内联验证以防止用户输入将来的日期就像我添加2022一样，我应该给我一个错误，就像您添加错误的日期或其他内容

这是我的html代码

<div class="form-group datepicker">
      <label for="dob">Date of Birth*</label>
      <div class="row input-group">
        <input
          ngbDatepicker
          #d="ngbDatepicker"
          #dobF="ngModel"
          class="form-control input-underline input-lg"
          id="dob"
          [(ngModel)]="dateOfBirth"
          placeholder="yyyy-mm-dd"
          name="dp"
          [ngClass]="{
            invalid:
              (dobF.value === null || isString(dobF.value)) && dobF.touched
          }"
          required
        />
        <div class="input-group-append">
          <button
            class="btn btn-outline-secondary calendar"
            (click)="d.toggle()"
            type="button"
          ></button>
        </div>
      </div>
      <div
        *ngIf="
          (dobF.value === null || isString(dobF.value)) && dobF.touched
        "
        class="error"
      >
        Please enter a valid date of birth.
      </div>
    </div>

这是我的Ts文件

我定义dateOfBirth的地方

public dateOfBirth: { year: number; month: number; day: number };
 constructor(
public router: Router,
public route: ActivatedRoute,
private modalService: NgbModal,
private store: Store<any>,
private authService: AuthService,
public config: NgbDatepickerConfig,
private duplicateFinderService: DuplicateFinderService
) 
{
const currentDate = new Date();
const day = currentDate.getDate();
const month = currentDate.getMonth() + 1;
const year = currentDate.getFullYear();
// customize default values of datepickers used by this component tree
this.config.minDate = { year: 1900, month: 1, day: 1 };
this.config.maxDate = { year, month, day };
// days that don't belong to current month are not visible
this.config.outsideDays = "hidden";
}

我似乎无法在互联网上找到任何帮助。有人能帮我吗？谢谢

Answer 1

由于您使用的是ngbDatepicker，因此一个选项是设置maxDate属性并添加readonly属性。这样，用户将被迫使用日期选择器，并且不能在输入字段中直接输入其他任何内容。

[maxDate]="maxDate" readonly

如何防止输入将来的日期角度4

1 个答案: