输入日期值角度

Question

SERVICE.TS

addP(nome: string, cognome: string, anno_n: string): Observable<any> {
     return this.http.post<Partecipanti>(this.partecipantiUrl, {
       nome: nome,
       cognome: cognome,
       anno_n: anno_n 
     }, this.httpOptions).pipe(
       tap((newPartecipante: Partecipanti) => this.log(`partecipante aggiunto w/ id=${newPartecipante.id}`)),
       catchError(this.handleError<Partecipanti>('addP'))
     );
   }

COMPONENT.TS

add(nome: string, cognome: string, anno_n: string): void {
      this.PartecipantiService.addP(nome, cognome, anno_n).subscribe(res => {
          console.log(res);
          this.loadUser();
        })

      }

<form class="row row-cols-lg-auto g-3 align-items-center float-center" (ngSubmit)="add(nome.value, cognome.value, anno_n.value)" (ngSubmit)="loadUser()" style="justify-content: center;">
      <div class="col-12">
        <label class="visually-hidden" for="inlineFormInputGroupUsername">Nome</label>
        <div class="input-group">
          <input type="text" class="form-control" id="inlineFormInputGroupUsername" required #nome placeholder="Nome">
        </div>
      </div>
      <div class="col-12">
        <label class="visually-hidden" for="inlineFormInputGroupUsername">Cognome</label>
        <div class="input-group">
          <input type="text" class="form-control" id="inlineFormInputGroupUsername" required #cognome placeholder="Cognome">
        </div>
      </div>
      <div class="col-12">
        <label class="visually-hidden" for="inlineFormInputGroupUsername">Data di nascita</label>
        <div class="input-group">
          <input type="text" class="form-control" id="inlineFormInputGroupUsername" required #anno_n useValueAsDate placeholder="Data di nascita (GG/MM/AAAA)">
        </div>
      </div>
    
      <div class="col-12">
        <button type="submit" class="btn btn-primary shadow-lg">Salva</button>
      </div>
    </form>

如何在“添加”函数中获取日期值？ 在我的函数添加中，我有 3 个字段（姓名、姓氏和日期），当我调用我的函数添加按钮时，我使用 (ngSubmit)="add(name.value, surname.value, date...?)。什么我必须使用？值是字符串，我找不到日期的东西！这部分在 component.html 上你能解释一下它是如何工作的吗？我的输入是 type="date"

Answer 1

我建议你使用 ngForm。这是处理这种情况的最简单方法。

在此处查看文档：https://angular.io/api/forms/NgForm

这是我做的一个工作示例：https://stackblitz.com/edit/angular-ivy-pqgewm?devtoolsheight=33&file=src/app/app.component.html

本质上你希望你的 HTML 看起来像这样：

<form #form="ngForm" (ngSubmit)="userService.submitForm(form)">
  <div>
    <label for="firstName">First Name</label>
    <input name="firstName" id="firstName" type="text" ngModel required />
  </div>
  <div>
    <label for="lastName">Last Name</label>
    <input name="lastName" id="lastName" ngModel type="text" required />
  </div>
  <div>
    <label for="dateOfBirth">Date of Birth</label>
    <input name="dateOfBirth" id="dateOfBirth" ngModel type="date" required />
  </div>
  <br />
  <button type="submit">Submit</button>
</form>

你的提交函数看起来像这样：

submitForm(form: NgForm) {
    if (form.valid) {
      const user: User = {
        name: form.value['firstName'],
        surname: form.value['lastName'],
        birth: new Date(form.value['dateOfBirth']),
      };
    }
  }