Блог

Я пытаюсь получить сведения о пользователе определенной строки и заполнить ее в форме при нажатии кнопки редактирования, но я не уверен, как это сделать. У меня есть метод, когда я нажимаю на строку, я получаю форму обновления для определенного идентификатора, но форма пуста..Как мне получить форму, заполненную FirstName, LastName, dob?

 
export class AddUserComponent implements OnInit {
 
  userConfigRecordForm: FormGroup;
  reload: EventEmitter<string> = new EventEmitter();
  mode: FormMode = FormMode.NEW;
  formMode = FormMode;
  isOnViewMode = false;
  isExist: boolean = false;
  showProgressBar: boolean = false;
  showFormContent: boolean = true;
  num:number
  
  userRecord: User
 
  existMessage: string = "";
  

 


distric=[{
  "key":"Colombo",
  "value": "Colombo"
},
{
  "key":"Gampaha",
  "value":"Gampaha"
}

]

  
  constructor(private service:NewUserService,
    private snackBar: MatSnackBar,private formBuilder: FormBuilder,private dialogRef: MatDialogRef<AddUserComponent>, private dialog: MatDialog) { }

  ngOnInit() {
    this.userConfigRecordForm=new FormGroup({
      firstName: new FormControl(),
      lastName: new FormControl(),
      dob: new FormControl()
      
    });

    if (this.mode == FormMode.UPDATE) {
      this.service.getUserById(this.num).subscribe((data: any) => {
        this.userRecord = data;
        this.userConfigRecordForm.get("firstName").setValue(data.user.firstName);
        this.userConfigRecordForm.get("lastName").setValue(data.user.lastName);
        this.userConfigRecordForm.get("dob").setValue(data.user.dob);
        
        

        
      });
    }
  }

  



    
  

   save(options) {
   
    this.users.skills=this.selectedValue.toString();
    this.users.district=this.selectedDistrict;
   
 
    this.showProgressBar = true;
    this.showFormContent = false;
    this.isExist = false;
    if (this.mode == FormMode.NEW) {
 
      this.service.addUser({  // method to add user
        firstName: this.userConfigRecordForm.get('firstName').value,
        lastName: this.userConfigRecordForm.get('lastName').value,
        dob: moment(this.userConfigRecordForm.get('dob').value).format('YYYY-MM-DD'),
        
          
      }).subscribe((data: any) => {
        console.log(this.userConfigRecordForm.value);

        if (data.status === "userExist") {
          this.isExist = true;
          this.existMessage = "User is already used !";
          this.showProgressBar = false;
          this.showFormContent = true;
        } else {
          if (options == 'exit') {
            this.reload.emit();
            this.showProgressBar = false;
            this.openDialogCreateSucess();
            this.dialogRef.close();
          } else {
            this.showProgressBar = false;
            this.showFormContent = true;
            this.openDialogCreateSucess();
            this.num = data.user.num;
            this.mode = FormMode.UPDATE
          }
        }
      }
      ,
        error => {
          console.log(error);
          this.openDialogFailed();
          this.showProgressBar = false;
          this.showFormContent = true;
        });
    }
    else {
      this.service.updateUser(this.num,       //updates user through id
       
       
      
      {
        num:this.num,
        firstName: this.userConfigRecordForm.get('firstName').value, //trying to get it's value to the form
        lastName: this.userConfigRecordForm.get('lastName').value, 
        dob: moment(this.userConfigRecordForm.get('dob').value).format('YYYY-MM-DD'),
      
      }).subscribe((data: any) => {
        if (data.status === "userExist") {
          this.isExist = true;
          this.existMessage = "User is already used !";
          this.showProgressBar = false;
          this.showFormContent = true;
        } else {
          if (options == 'exit') {
            this.reload.emit();
            this.showProgressBar = false;
            this.openDialogUpdateSucess();
            this.dialogRef.close();
          } else {
            this.showProgressBar = false;
            this.showFormContent = true;
            this.openDialogUpdateSucess();
          }
        }
      },
        error => {
          console.log(error);
          this.openDialogFailed();
          this.showProgressBar = false;
          this.showFormContent = true;
        });

 

getUserById

 public getUserById(num){
    return this.http.get("http://localhost:8080/dms-training-service/V1/example/users/id/"  num);
  }
 

перед использованием модальной формы мы можем изменить способ создания формы. Мы собираемся использовать функцию, которая возвращает FormGroup -со значениями пустыми или со значениями в соответствии с данными

 getForm(data:any=null):FormGroup
{
    data=data || {firstName:null,lastName:null,dob:null}
    return new FormGroup({
      firstName: new FormControl(data.firstName),
      lastName: new FormControl(data.lastName),
      dob: new FormControl(data.dob)
    });
}
 

Это позволяет нам писать

    this.userConfigRecordForm=this.getForm() //and empty FormGroup
   //or
   this.userConfigRecordForm=this.getForm(data) //a FormGroup with "data"
 

Ну, у нас есть модальный. Если мы используем material-angular модальный, мы передаем значение модальному в «data» при открытии модального

   open(data)
  {
    const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
      width: '250px',
      data: {firstName: data.firstName, lastName: data.lastName,dob:data.dob}
    });
  }
 

Итак, наш компонент может быть следующим:

   //if you use material angular modal

  export class AddUserComponent implements OnInit{
  constructor(
    public dialogRef: MatDialogRef<DialogOverviewExampleDialog>,
    @Inject(MAT_DIALOG_DATA) public data: DialogData) {}
  }
  ngOnInit()
  {
    if (this.data){
      this.userConfigRecordForm=this.getForm(this.data)
      this.mode=FormMode.UPDATE;
    }
    else{
      this.userConfigRecordForm=this.getForm()
      this.mode=FormMode.NEW;
    }
  }
 

Если мы используем модальный ng-bootstrap, способ присвоения значения используется в нашем компоненте a @Input , поэтому мы открываем диалоговое окно следующим образом

   open(data) {
    const modalRef = this.modalService.open(NgbdModalContent);
    modalRef.componentInstance.data= {
          firstName: data.firstName, lastName: data.lastName,dob:data.dob
    }
  }
 

И мы используем @Input , чтобы дать значение вместо этого, используя ngOnInit

 @Input() set data(value)
{
    if (value){
      this.userConfigRecordForm=this.getForm(value)
      this.mode=FormMode.UPDATE;
    }
    else{
      this.userConfigRecordForm=this.getForm()
      this.mode=FormMode.NEW;
    }
}
 

В обоих случаях у нас есть функция open(data) . В общем, когда у нас есть таблица, нет необходимости снова запрашивать значение API, потому что у нас есть в «таблице» значения. Ну, наш стол похож на

 <button (click)="open(null)">new</button>
<table>
  <tr *ngIf="let element of myArrayWithData">
     <td>{{element.firstName}}</td>
         ....
     <td><button (click)="open(element)">Edit</button>
  </tr>
</table>
 

Ну, иногда требуется передать «идентификатор» только выбранному элементу, поэтому у нас есть два варианта,

1.-Наши открытые функции могут быть такими

 open(id){
    this.service.getUserById(id).subscribe(data=>{
       //if using material-angular
       const dialogRef = this.dialog.open(...}
       //if using ng-bootstrap
       const modalRef = this.modalService.open(...);
       modalRef.componentInstance.data= data;
    })
}
 

2.- мы подписываемся в модальном компоненте

   //If using angular modal
  ngOnInit()
      {
        if (this.data.id){
         this.service.getUserById(id).subscribe(data=>{
            this.userConfigRecordForm=this.getForm(data)
            ...
        }
        else{
          this.userConfigRecordForm=this.getForm()
            ....
        }
      }

  //if using ng-bootstrap
  @Input() set data(value){
      if (value){
        this.service.getUserById(value).subscribe(data=>{
           this.userConfigRecordForm=this.getForm(value)
           ...
        }
      }
      else{
           this.userConfigRecordForm=this.getForm(value)
           ...
      }
  }