web-dev-qa-db-ja.com

データを作成および編集するための同じフォームAngular4

これは、2つのウェイバインドされた入力フィールドを持つフォームです。目標は、データを編集および作成するために同じフォームを作成することでした。これは達成されましたが、これを行うためのより良い方法があると確信しています（AbstractControl機能を使用するなど）。また、ここで1つの修正を見逃しています-クリックされるclickEdit()が、ユーザーが編集したいオブジェクトでフォーム値を更新する必要がある場合。 AbstractControlとNgModel。についてのヘルプと特に説明をありがとう。

<div>
<form (ngSubmit)="clicked ? onEditSubmit($event) : onRegisterSubmit($event)" [formGroup] = "form">
  <div class="form-group">
    <label>Full Name</label>
    <input type="text" [(ngModel)]="fullname" formControlName="fullname" class="form-control" >

  </div>
  <div class="form-group">
    <label>Username</label>
    <input type="text" [(ngModel)]="username" formControlName="username" class="form-control" >
  </div>
  <div class="form-group">
    <label>Email</label>
    <input type="text" [(ngModel)]="email" formControlName="email" class="form-control" >
  </div>
  <div class="form-group">
    <label>Password</label>
    <input type="password" [(ngModel)]="password" formControlName="password" class="form-control">
  </div>
  <button type="submit" class="btn btn-primary" [disabled]="!form.valid"> Submit </button>
</form>
</div>

<br>
<br>

<table  border="2" class="table table-striped">
<tr>
  <th>Full Name</th>
  <th>Username</th>
  <th>Email</th>
  <th>Password</th>
  <th>Delete</th>
  <th>Edit</th>
</tr>
<div > </div>
<tr *ngFor="let user of userDetails; index as i">
  <td>{{user.fullname}}</td>
  <td>{{user.username}}</td>
  <td>{{user.email}}</td>
  <td>{{user.password}}</td>
  <td><button (click)="userDelete()">X</button></td>
  <td><button (click)="clickEdit(i)">Edit</button></td>
</tr>
</table>

そして

import { Component } from '@angular/core';
import { initializeApp, database } from 'firebase';
import { FormControl, FormGroup, Validators } from '@angular/forms';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {

  fullname : string;
  username : string;
  email : string;
  password : string;

  clicked = false;

  userDetails:Array<object>;

  form;

  ngOnInit() {
   this.userDetails=[];
    this.form = new FormGroup({
      fullname : new FormControl("", Validators.required),
      username : new FormControl("", Validators.required),
      email : new FormControl("", Validators.required),
      password : new FormControl("", Validators.required)
    });
  }

  onRegisterSubmit(e){
    let user = {
      fullname : this.fullname ,
      username : this.username,
      email : this.email ,
      password : this.password
    }
     this.userDetails.Push(user);
     this.clearInputFields(e);
   }

   editIndex = null;

  clickEdit(i){
    this.clicked = !this.clicked;
    this.editIndex = i;
  }

  onEditSubmit(e) {
    let editUser = {
      fullname : this.fullname ,
      username : this.username,
      email : this.email ,
      password : this.password
    }
    this.userDetails[this.editIndex] = editUser;
    this.clearInputFields(e);  
    this.clicked = !this.clicked;  
  }

  clearInputFields(e){
   let all = e.target.querySelectorAll('input');
    Object.keys(all).forEach(key => {
        console.log(all[key].value = '');   
    });    
  }
}
angularangular-ngmodel
8
Julius Dzidzevičius

フォームにかなりの数の変更を加えます。 ngModelは、リアクティブフォームを使用しているため、ここでは完全に冗長です。代わりにそれを利用して、すべてのngModelを削除してください。フォームから取得するオブジェクトはuserと一致しているため、できることは、その値をそのまま配列にプッシュするだけです。

したがって、テンプレートは次のようになります（残りのコードとして短縮されます）。

<form (ngSubmit)="onRegisterSubmit(form)" [formGroup] = "form">
  <input type="text" formControlName="username" class="form-control" >
  <input type="submit" class="btn btn-primary" value="Submit" [disabled]="!form.valid">
</form>

この場合、私が持っているフォームのビルドでは、disabledであるため、フォームオブジェクトからも除外される隠しフィールドを使用しました。これは私たちのヘルパーなので、これが新しいuserであるか、userを編集しているかを区別できます。値には、配列のuserのインデックスが保持されます。その値が存在する場合、配列内のオブジェクトを更新することがわかります。値が存在しない場合は、ユーザーを配列にプッシュします。

これはさまざまな方法で解決できますが、上記の選択肢は1つです。

this.form = this.fb.group({
  index: [{value: null, disabled:true}]
  username : ['', Validators.required],
  email : ['', Validators.required],
});

したがって、上記に従って、onRegisterSubmitを次のように変更できます。

onRegisterSubmit(form) {
  // since field is disabled, we need to use 'getRawValue'
  let index = form.getRawValue().index
  if(index != null) {
    this.userDetails[index] = form.value
  } else {
    this.userDetails.Push(form.value)      
  }
  this.form.reset() // reset form to empty
}

ユーザーを編集する場合、テンプレートでインデックスとユーザーを渡します

<tr *ngFor="let user of userDetails; let i = index">
  <td>{{user.username}}</td>
  <td>{{user.email}}</td>
  <td><button (click)="userEdit(user, i)">Edit</button></td>
</tr>

次に、setValue（またはpatchValue）を使用して、既存の値を使用してフィールドに入力します。

userEdit(user, i) {
  this.form.setValue({
    index: i,
    username: user.username,
    email: user.email
  })
}

これでうまくいくはずです！これで、コードをどれだけ単純化し、不要なものを取り除くことができるかがわかりました！ :)

13
AJT82