locked
How to use same form or page for insert and update . it edit but cannot insert ? RRS feed

  • Question

  • User696604810 posted

    problem

    How to use same form or page for insert and update . it edit but cannot insert ?

    I have component name employees used for edit record 

    i need to use it for insert but cannot do that .

    it load data on case of passing record for edit or not meaning i need to prepare this form for two purpose insert and edit

    so that please how to modify it for insert also ?

    export class EmployeesComponent{
        employees = {}
        empformlabel: string = 'Add Employee';  
        empformbtn: string = 'Save';
        constructor(private formBuilder: FormBuilder ,private router: Router , private api:ApiService,private toastr: ToastrService){}
     
        addForm: FormGroup; 
        btnvisibility: boolean = true; 
        ngOnInit() {
          this.addForm = this.formBuilder.group({  
            employeeId: [],  
            employeeName: ['', Validators.required],  
            branchCode: ['', [Validators.required, Validators.maxLength(2)]]
            
          }); 
            
           let empid = localStorage.getItem('editEmpId'); 
           console.log(empid) ;
        if (+empid > 0) {  
          console.log("success") ;
          this.api.getEmployeeById( +empid).subscribe(data => {  
            this.addForm.patchValue(data);
            console.log(data);  
          })  
          this.btnvisibility = false;  
          this.empformlabel = 'Edit Employee';  
          this.empformbtn = 'Update'; 
        }  
    
          }
    
    
    onSubmit() {  
      console.log('Create fire');  
      this.api.createEmployee(this.addForm.value)  
        .subscribe(data => {  
          this.router.navigate(['employeelist']);  
        },  
        error => {  
          alert(error);  
        });  
    }  
    onUpdate() {  
      console.log('Update fire');  
      this.api.updateEmployee(this.addForm.value).subscribe(data => {  
        this.router.navigate(['employeelist']);  
      },  
        error => {  
          alert(error);  
        });  
    }  
    
    }
    <div class="col-md-6">  
        <h2 class="text-center">{{empformlabel}}</h2> 
        <form [formGroup]="addForm" novalidate class="form">  
          <div class="form-group">  
            <label for="employeeId">employee Id:</label>  
            <input type="number" formControlName="employeeId" placeholder="employeeId" name="employeeId" class="form-control" id="employeeId">  
          </div>  
          <div class="form-group">  
            <label for="branchCode">Branch Code:</label>  
            <input type="number" formControlName="branchCode" placeholder="branchCode" name="branchCode" class="form-control" id="branchCode">  
          </div>  
          <div class="form-group">  
            <label for="employeeName">Employee Name:</label>  
            <input formControlName="employeeName" placeholder="Employee Name" name="employeeName" class="form-control" id="employeeName">  
            <div class="alert  alert-danger" *ngIf="addForm.get('employeeName').hasError('required') && addForm.get('employeeName').touched">  
              Employee Name is required  
            </div>  
          </div>  
        
          
        
         
          <button class="btn btn-success" [disabled]='addForm.invalid' *ngIf="btnvisibility" (click)="onSubmit()">Save</button>  
          <button class="btn btn-success" [disabled]='addForm.invalid' *ngIf="!btnvisibility" (click)="onUpdate()">Update</button>  
          <p>Form value: {{ addForm.value | json }}</p> 
          
        </form>  
      </div>  
    

    Thursday, February 21, 2019 12:39 PM

All replies

  • User-474980206 posted

    this is really an angular coding question, and has nothing to do with MVC. you should try stack overflow, or an angular forum.

    Thursday, February 21, 2019 5:04 PM