Question

我尝试将表单添加到组件页面，并且我想对日期格式添加一些控制，当用户单击submit按钮时必须完成此操作。我正在使用ReactiveFormsModule。

但是下面的代码什么都不做。它可以编译，但是即使日期格式与其FormControl中的正则表达式不匹配，仍可以提交表单。

我想念什么？

请注意，我是Angular的初学者，这是我的第一个表格。

模板：

<form [formGroup]="formulaireRechercheDeCohorte" (ngSubmit)="rechercheCohorte()">

<label for="jour-debut-cohorte" class="sr-only">Jour du début</label>

<input type="text" class="form-control" id="jour-debut-cohorte" 
name="periodeDebut" 
[(ngModel)]="criteresRechercheCohorte.datePeriodeDebut"
 formControlName="controleurDateDebutPeriode" />

<button type="submit" class="btn btn-primary">Rechercher</button>

</form>

控制器：

formulaireRechercheDeCohorte: FormGroup;
  controleurDateDebutPeriode: FormControl;

  constructor() {
    this.controleurDateDebutPeriode = new FormControl(Validators.pattern(/^\d{1,2}\.\d{1,2}\.\d{4}$/));
    this.formulaireRechercheDeCohorte = new FormGroup({
      "controleurDateDebutPeriode" : this.controleurDateDebutPeriode
    });
  }

rechercheCohorte() {
...call to http service
}

Answer 1

查看此工作StackBlitz of your example

您需要更新FormControl，使其包含这样的值：this.controleurDateDebutPeriode = new FormControl('' , Validators.pattern(/^\d{1,2}\.\d{1,2}\.\d{4}$/));

您还可以将disabled属性添加到您的“提交”按钮，以防止用户首先提交无效的表单。

<button type="submit" [disabled]="!formulaireRechercheDeCohorte.valid" lass="btn btn-primary">Rechercher</button>

我需要有关Angular中的表单的帮助

1 个答案: