Question

我有以下反应形式：

this.forma = fb.group ({
  valorPropiedad: [ 100000, Validators.required ],
  nombre: [ '', Validators.required ],
  email : [ '', [Validators.required, Validators.email] ],
  celular: [ '',  [Validators.required, Validators.maxLength(9)] ],
  acepta : [ false, Validators.requiredTrue ],
  fecha: [ firebase.firestore.FieldValue.serverTimestamp() ],
  estado: [ false ],
});

默认情况下，我的按钮处于禁用状态，直到验证了必填字段为止。

我的HTML格式：

<form #f="ngForm" [formGroup]="forma" (ngSubmit)="agregarDomiciliario()" novalidate>

        <div class="row">

          <mat-form-field class="col-md-12">
            <input matInput placeholder="Valor de la vivienda (US$ - Dólares americanos)" type="number" formControlName="valorPropiedad">
            <span class="mr-2" matPrefix>US$ </span>
            <mat-error *ngIf="forma.controls['valorPropiedad'].invalid">{{ errorValorPropiedad() }}</mat-error>
          </mat-form-field>
        </div>

        <mat-form-field>
          <input matInput placeholder="Ingresa tu email" type="email" formControlName="email">
          <mat-error *ngIf="forma.controls['email'].invalid">{{ errorEmail() }}</mat-error>
        </mat-form-field>

        <div class="row">
          <mat-form-field class="col-md-6">
            <input matInput placeholder="Ingresa tu nombre" type="text" formControlName="nombre">
            <mat-error *ngIf="forma.controls['nombre'].invalid">{{ errorNombre() }}</mat-error>
          </mat-form-field>

          <mat-form-field class="col-md-6">
            <input matInput #celular  maxlength="9" placeholder="Ingresa tu celular" type="text" formControlName="celular">
            <mat-error *ngIf="forma.controls['celular'].invalid">{{ errorCelular() }}</mat-error>
            <mat-hint align="end">{{celular.value.length}} / 9</mat-hint>
          </mat-form-field>
        </div>

        <mat-checkbox class="small" formControlName="acepta">Acepto los <a [routerLink] (click)="openDialog()">términos y condiciones</a></mat-checkbox>

        <div class="mt-3">
          <button type="submit" class="btn btn-primary btn-block shadow" [disabled]="!forma.valid">Quiero más información <i class="fas fa-arrow-right ml-2"></i></button>
        </div>  
      </form>

component.ts

agregarDomiciliario() {
this.fs.addDomiciliario(this.forma.value);
console.log(this.forma.value);
this.form.resetForm({ 
  fecha: firebase.firestore.FieldValue.serverTimestamp(),
  estado: false
});

this.snackBar.open(this.message, this.action, {
  duration: 5000,
});
}

service.ts

addDomiciliario(domiciliario){
this.afs.collection('domiciliarios').add(domiciliario);
}

一切正常我做了几次测试都没问题，但事实证明，几天之后我刚刚收到一个带有null值的firestore文档我不明白，如果配方设计师不允许你发送如果表格未经过验证。

有人可以向我解释可能发生的事情吗？

Answer 1

重置活动表单时，所有值都设置为null。所以你看到的结果就是我所期待的。但问题是你没有考虑firestore操作的异步性质。

要获得您正在寻找的结果，您应该重构：

async agregarDomiciliario() {
  await this.fs.addDomiciliario(this.forma.value);
  // Wait for firestore, before resetting the form
  this.form.resetForm({ 
    fecha: firebase.firestore.FieldValue.serverTimestamp(),
    estado: false
  });
  // Show the snackbar
  this.snackBar.open(this.message, this.action, {
    duration: 5000,
  });
}

addDomiciliario(domiciliario){
  return this.afs.collection('domiciliarios').add(domiciliario);
}

要了解有关异步等待的更多信息，我可以推荐此video。

Answer 2

add()方法是异步承诺，您正在同步重置表单，因此在我们确定它是否添加了文档之前它会被重置。试试这个：

service.ts：

addDomiciliario(domiciliario): Promise<any> {
  return this.afs.collection('domiciliarios').add(domiciliario);
}

component.ts：

agregarDomiciliario() {
  this.addDomiciliario(this.forma.value).then(() => {
    this.form.resetForm({ 
      fecha: firebase.firestore.FieldValue.serverTimestamp(),
      estado: false
    });

    this.snackBar.open(this.message, this.action, {
      duration: 5000,
    });
  }, error => console.error('error submitting form:', error));
}

null Firestore whit反应形式

2 个答案: