尝试：-

Question

我正在使用模态进行更新和创建，但是当我再次单击新按钮（表单不清除输入）时，我需要重置表单。

当我单击关闭按钮时，我试图在html模式中创建一个函数（click）=“ onCloseMember（formRecipe）”。

modal.components.html

<div class="modal fade" id="modalRecipe" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" (click)="onCloseMember()" >
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">
            {{ !this.dataApi.selectedRecipe.id ? 'Nueva Receta' : 'Actualizar Receta'}}
        </h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true" (click)="onCloseMember()" >&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form name="formRecipe" #formRecipe="ngForm" (ngSubmit)="onSaveRecipe(formRecipe)">
          <input type="hidden" name="id" required [(ngModel)]="this.dataApi.selectedRecipe.id">
          <input type="hidden" name="userUid"required [value]="userUid">
          <div class="form-group">
            <label for="titulo" class="col-form-label">Nombre Receta:</label>
            <input type="text" required class="form-control" name="titulo" [(ngModel)]="this.dataApi.selectedRecipe.titulo">
          </div>
          <div class="form-row">
            <div class="form-group col-md-6">
              <label for="clase">Clase</label>
              <select name="clase" class="form-control" required [(ngModel)]="this.dataApi.selectedRecipe.clase">
                <option value="Entrante">Entrante</option>
                <option value="Comida">Comida</option>                
                <option value="Postre">Postre</option>
                <option value="Postre">Otros</option>                 
              </select>
            </div>
            <div class="form-group col-md-6">
              <label for="tiempo">Tiempo</label>
              <input type="text" required name="tiempo" class="form-control" placeholder="60" [(ngModel)]="this.dataApi.selectedRecipe.tiempo">
            </div>
            <div class="form-group col-md-6">
                <label for="tiempo">Número de personas</label>
                <input type="text" name="numpersonas" required class="form-control" placeholder="4" [(ngModel)]="this.dataApi.selectedRecipe.numpersonas">
              </div>
          </div>
          <div class="form-row">
            <div class="form-group col-md-6">
              <label for="autor">Autor</label>
              <input type="text" name="autor" required class="form-control" placeholder="Autor" [(ngModel)]="this.dataApi.selectedRecipe.autor">
            </div>
            <div class="form-group col-md-6">
              <label for="nuevo">Nueva Receta</label>
              <select name="nuevo" class="form-control" required [(ngModel)]="this.dataApi.selectedRecipe.nuevo">
                <option value="1">Sí</option>
                <option value="0">No</option>
              </select>
            </div>
          </div>
          <div class="form-row">
            <div class="form-group col-md-6">
              <label for="portada">Foto Receta</label>
              <input type="text" name="portada" class="form-control" placeholder="Portada" [(ngModel)]="this.dataApi.selectedRecipe.portada">
            </div>
            <div class="form-group col-md-6">
              <label for="link_video">Enlace Video</label>
              <input type="text" name="link_video" class="form-control" required placeholder="Link video" [(ngModel)]="this.dataApi.selectedRecipe.link_video">
            </div>
          </div>

          <div class="form-group">
            <label for="descripcion" class="col-form-label">Breve Descripción:</label>
            <textarea class="form-control" rows="6" name="descripcion" required placeholder="Escribe aqui una descripción corta 4-5 lineas" [(ngModel)]="this.dataApi.selectedRecipe.descripcion"></textarea>
          </div>
          <div class="form-group">
              <label for="ingredientes" class="col-form-label">Ingredientes:</label>
              <textarea class="form-control" rows="6" required name="ingredientes" 
              placeholder="
              500 g  harina de trigo 
              350 ml Agua
              6 g levadura
              10 g de sal" [(ngModel)]="this.dataApi.selectedRecipe.ingredientes"></textarea>
            </div>
          <div class="form-group">
              <label for="preparacion" class="col-form-label">Preparación detallada:</label>
              <textarea class="form-control" required rows="14" name="preparacion" placeholder="Escribe aqui todo el proceso de preparación" [(ngModel)]="this.dataApi.selectedRecipe.preparacion"></textarea>
            </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" #btnClose data-dismiss="modal" (click)="onCloseMember()">Cerrar</button>
            <button type="submit" class="btn btn-primary">Publicar Receta</button>
          </div>
        </form>
      </div>

    </div>
  </div>
</div>

然后在.ts文件中，我使用resetForm（）创建函数。

modal.component.ts

  import { Component, OnInit, ViewChild, ElementRef, Input } from '@angular/core';
import { DataApiService } from '../../services/data-api.service';
import { RecipeInterface } from '../../models/recipe';
import { NgForm } from '@angular/forms';
import { AngularFireStorage } from '@angular/fire/storage';
import { finalize } from 'rxjs/operators';
import { Observable } from 'rxjs/internal/Observable';
import { ChangeDetectorRef } from '@angular/core';


@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html',
  styleUrls: ['./modal.component.css']
})
export class ModalComponent implements OnInit {

  constructor(private dataApi: DataApiService, private storage: AngularFireStorage, private changeDetectorRef: ChangeDetectorRef) { }
  @ViewChild('btnClose') btnClose: ElementRef;
  @Input() userUid: string;
  @ViewChild('imageUser') inputImageRecipe: ElementRef;
  @ViewChild('formRecipe') formRecipe: NgForm;   

  ngOnInit() {

  }

  uploadPercent: Observable<number>;
  urlImage: Observable<string>;
  //files: any[];


  onUpload(e) {
    // console.log('subir', e.target.files[0]);
    const id = Math.random().toString(36).substring(2);
    const file = e.target.files[0];
    const filePath = `uploads/recipes/photo_${id}`;
    const ref = this.storage.ref(filePath);
    const task = this.storage.upload(filePath, file);
    this.uploadPercent = task.percentageChanges();
    task.snapshotChanges().pipe(finalize(() => this.urlImage = ref.getDownloadURL())).subscribe();    
  }

  onSaveRecipe(recipeForm: NgForm): void {
    if (recipeForm.value.id == null) {
      // New 
      recipeForm.value.userUid = this.userUid;    

      this.dataApi.addRecipe(recipeForm.value);
    } else {
      // Update
      this.dataApi.updateRecipe(recipeForm.value);
    }
    recipeForm.resetForm();
    this.btnClose.nativeElement.click();
  }

  onCloseMember(){
   this.formRecipe.reset();
   this.changeDetectorRef.detectChanges();
  }


}

更新代码正在工作。

Answer 1

尝试：-

user = "Hey"
a = f"Hello World {user}"

print(a)

如何重置模态形式

1 个答案:

尝试：-