Блог

У меня есть простая форма добавления, подобная этой

     <form class="form" [formGroup]="registerForm" (ngSubmit)="onSubmit()">
        <div class="row">
            <div class="col-md-12">
                <div class="form-group">
                    <label for="floatEmail">Product Name</label>
                    <input type="text" class="form-control"  name="name" formControlName="name" >
                    <div *ngIf="submitted amp;amp; f.name.errors">
                        <small class="form-text text-muted danger" *ngIf="f.name.errors.required" >Please enter a name!</small>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="form-group">
                    <label for="floatEmail">Product Arabic Name</label>
                    <input type="text" class="form-control"  name="arname" formControlName="arname" >
                    <div *ngIf="submitted amp;amp; f.arname.errors">
                        <small class="form-text text-muted danger" *ngIf="f.arname.errors.required" >Please enter a arname!</small>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <fieldset class="form-group">
                    <label for="placeTextarea">Product Description</label>
                    <textarea class="form-control" id="placeTextarea" rows="3" name="description" formControlName="description" placeholder="Textarea with placeholder"></textarea>
                    <div *ngIf="submitted amp;amp; f.description.errors">
                        <small class="form-text text-muted danger" *ngIf="f.description.errors.required" >Please enter a description!</small>
                    </div>
                </fieldset>
            </div>
        </div>
        -->

        <div class="form-group">
            <div class="col-md-12 text-right">
                <button type="button" class="btn btn-success btn-raised mr-1">Cancel</button>
                <button type="button" class="btn btn-danger btn-raised" (click)="onSubmit()">Submit</button>
            </div>
        </div>
    </form>
 

.ts

   ngOnInit() {
    this.registerForm = this.formBuilder.group({
      name: ['', Validators.required],
      arname: ['', Validators.required],
      description: ['', Validators.required],

  });
  }
  get f() { return this.registerForm.controls; }

  onSubmit() {
    this.submitted = true;

    // stop here if form is invalid
    if (this.registerForm.invalid) {
        return;
    }

    // display form values on success
    console.log(this.registerForm.value);
    var body = this.registerForm.value
    this.http.post("http://itserviceapi.airtechsolutions.pk/api/admin/category/insert", body).subscribe((data) => {
      console.log(data);
    });

}
 

Мне нужно знать, как я могу использовать ту же форму, что и для редактирования?

Имею в виду, что в редактировании у меня есть все эти поля, которые находятся во вводе, но как я могу знать, что это вызов редактирования, а не вызов добавления

Я просто использую ссылку маршрутизатора, подобную этой, мне нужно что-то передать, чтобы я знал его форму редактирования или что-то в этом роде ?

 routerLink="/full-layout/edit-form"
 

Что вы можете сделать, так это ввести в свой маршрут идентификатор, чтобы узнать, что эта страница находится в форме редактирования:

  {
                path: "full-layout/:option",
                component: FullLayoutComponent,
 }, 

Теперь вы можете получить идентификатор с помощью маршрута и поместить ActivatedRoute в свой конструктор:

  
    options = this.route.snapshot.params.options
 
    constructor(
        private route: ActivatedRoute
    ) { }
    
    functionToAddOrEdit(){
       if(this.option == 1)
         //add
       else
         //edit
    } 

Вы можете назвать свой маршрут так:

   constructor(
        private router: Router,
    ) { }
    
    someFunction(){
        this.router.navigate(["full-layout/1"])  //you can put any value that you want to distinguish add and edit
    } 

Теперь вы знаете с помощью параметра переменная, предназначена ли эта форма для редактирования или добавления

вы можете передать некоторый флаг параметра в форму в режиме редактирования. В форме вы можете проверить значение флага и выбрать Режим добавления или Режим редактирования.

Вы можете использовать объект в качестве ngModel, поэтому, когда вы собираетесь создавать новый продукт, вы можете установить для всех полей основного объекта значение null (чтобы изменить их в форме), а при редактировании продукта вы просто клонируете продукт в продукт ngModel.

Что-то вроде этого:

.ts:

 editProduct(){
   this.formProduct = productToEdit;
}

createProduct(){
   this.formProduct = new Product();
}
 

HTML:

 <input type="text" class="form-control" [(ngModel)]="formProduct.arname" name="arname" formControlName="arname" >
 

Это должно помочь решить вашу проблему! 🙂