web-dev-qa-db-ja.com

Angular反応的なフォーム、フィールドの追加と削除？

angular 5でクラッドアプリを作成しているときに、同じフォームビルダーを使用して、必要に応じて取得するフォームコントロールを変更し、ユーザーを追加または更新する方法を教えてください。フォームを通して...

ここにいくつかの単純なコードがあります。私は多くの属性を持つかなり大きなフォームを持っているので、物事を複雑にしないように努めます...

だから私のapp.component.htmlにはフォームがあります

         <form class="form-horizontal" [formGroup]="form" #myForm="ngForm" 
          (ngSubmit)="save()"> 
                <div class="form-group">
                    <label for="firstName" class="control-label 
                  required">First name</label>
                    <input type="text" id="firstName" class="form-control" 
             formControlName="firstName">


                </div>

                <div class="form-group">
                    <label for="lastName" class="control-label 
            required">Last name</label>
                    <input type="text" id="lastName" class="form-control" 
            formControlName="lastName"> 
                </div>

そして私のapp.component.tsに

私のコンストラクターでは

    this.form = this.formBuilder.group({ 
        firstName: ['', [Validators.required, Validators.minLength(2), 
   Validators.pattern(/^[a-zA-Z]+$/)]],
        lastName: ['', [Validators.required, Validators.minLength(2), 
   Validators.pattern(/^[a-zA-Z]+$/)]],

    });

フォームを送信するためのsave（）関数

    save() {
    let formModel = this.form.value;
    formModel.id = this.Id;

    if (this.Id == null) { 
        this._usermanagementservice.addEmployee(formModel).subscribe(() => {

           //function that reloads table with employees
            this.LoadAllEmployees();
        });
    }
    else {
        this._usermanagementservice.updateEmployee(this.Id, formModel).subscribe(() => {
            this.LoadAllEmployees();
        });
    }
}

すべてが機能することに注意してください、他のフィールドは含めていませんが、ここに質問があります。ユーザーの追加時に名前フィールドのフォームのみを含め、更新するための姓のみをどのように含めることができますか？ （簡単にするために、この例では姓と名を使用しています）

よろしくお願いします。詳細情報が必要な場合は、喜んでPsを提供します。英語は私の二次言語なので、フィールド、フォームなどの用語は確かに正しくありません。うまくいけば、ポイントがわかります

angularangular-reactive-forms
7
Questions

最初に、オプションのテンプレートベースのグループを作成できます。テンプレートで* ngIfを使用して、フォーム内の要素のグループの表示と非表示を切り替えることができます。次にformBuilderを使用して、有効になっているフォームコントロールのオブジェクトのみを渡すたびにフォームのフォームインスタンスを作成します。

テンプレート

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
<label for="name">First Name:</label>
<input type="text" formControlName="fname"
placeholder="Enter name">
<br /><br />
<div *ngIf="lNameEmail1">
<label for="name">Last Name:</label>
<input type="text" formControlName="lname"
placeholder="Enter name">
<br /><br />
<label for="email">Email:</label>
<input type="email" formControlName="email"
placeholder="Enter email">
</div>
<div *ngIf="lNameEmail2">
<label for="name">Last Name2:</label>
<input type="text" formControlName="lname2"
placeholder="Enter name">

<br /><br />

<label for="email">Email2:</label>
<input type="email" formControlName="email2"
placeholder="Enter email">
</div>
<br /><br />
<button type="submit" [disabled]="!myForm.valid">Submit
</button>
<button type="submit" (click)='formGrp1()'> Form 1</button>
<button type="submit" (click)='formGrp2()'> Form 2</button>
</form>

Angularクラス

export class AppComponent implements AfterViewInit {
        public myForm: FormGroup;
        lNameEmail1 = false;
        lNameEmail2 = false;
        myFormProperty1 = {
        "fname": new FormControl("", Validators.required)
        };

        myFormProperty2 = {
        "fname": new FormControl("", Validators.required),
        "lname": new FormControl("", Validators.required),
        "email": new FormControl("")

        };
        myFormProperty3 = {
        "fname": new FormControl("", Validators.required),
        "lname2": new FormControl("", Validators.required),
        "email2": new FormControl("")

        };

        constructor(public fb: FormBuilder) {
        this.myForm = this.fb.group(this.myFormProperty1);
        }


        formGrp1(){
        alert('Form 1 enable')

        this.lNameEmail1 = true;
        this.lNameEmail2 = false;

        this.myForm = this.fb.group(this.myFormProperty2);


        this.myForm.valueChanges.subscribe(data =>
        console.log('form object ====' + JSON.stringify(data)
        )); 
        }
        formGrp2(){
        alert('Form 2 enable')
        this.lNameEmail1 = false;
        this.lNameEmail2 = true;

        this.myForm = this.fb.group(this.myFormProperty3);

        this.myForm.valueChanges.subscribe(data =>
        console.log('form object ====' + JSON.stringify(data)
        )); 

        }
        onSubmit() {
        console.log('Form submitted Value=='+ JSON.stringify(this.myForm.value));
        }

    }
0
Abhimanyu

FormGroup AP​​I はaddControlやremoveControlなどのメソッドを公開します。これらを使用して、初期化された後にフォームグループにコントロールを追加または削除できます。 。

これらのメソッドを使用した例は次のようになります。

formMode: 'add' | 'update';
userForm: FormGroup;

ngOnInit() {
  this.form = this.formBuilder.group({ 
    firstName: [''],
    lastName: ['']
  });
}

changeMode(mode: 'add' | 'update') {
  if (mode === 'add') {
    if (!this.form.get('firstName')) {
      this.form.addControl('firstName');
    }
    this.form.removeControl('lastName');
  } else {
    if (!this.form.get('lastName')) {
      this.form.addControl('lastName');
    }
    this.form.removeControl('firstName');
  }
}

onChange(event: 'add' | 'update') {
  this.changeMode(event);
}

おそらく、特定のコントロールの存在に基づいて*ngIfチェックを追加することにより、DOMにフォームの状態を反映させる必要があります。

<input *ngIf="form.get('lastName')" formControlName="lastName">
18
vince

addControl RemoveControl uを使用すると、フィールドの表示と非表示を切り替えることができます。

<div>
    <label>Description<i class="fa fa-pencil" aria-hidden="true" (click)="editField(formControlKeys.description)"></i></label>
    <h6 *ngIf="!detailForm.controls.description; else showDescriptionField">{{ projectData?.description }}</h6>
    <ng-template #showDescriptionField>
      <textarea formControlName="description" class="form-control" rows="2"></textarea>
      <i class="fa fa-close" (click)="removeDescriptionControl()"></i>
    </ng-template>
  </div>

コントロールを追加：

editField(this.formControlKeys.description){
        this.detailForm.addControl('description', new FormControl(''));
        this.detailForm.controls['description'].setValue(this.projectData.description);
}

コントロールを削除：

 removeDescriptionControl() {
    this.detailForm.removeControl('description');
  }

最初にフォームグループを作成します。

 this.detailForm = this.formBuilder.group({
    });

formControlKeysを設定します。

formControlKeys = {
    description: 'description'
  };
1
kiran kirtkar

これは、条件付きangularフォームコントロールの追加/削除の最も単純な複製です。

someCheckboxControlという名前のチェックボックスコントロールを持つフォームがあることを確認して、他のコントロールを追加/削除するためのブール値の変更を監視します。

ngOnInit() {
   this.form.controls['someCheckboxControl'].valueChanges.subscribe(someCheckboxControlVal => {
       if (someCheckboxControlVal) {
           this.form.addControl('SomeControl', new FormControl('', Validators.required));
       } else {
           this.form.removeControl('SomeControl');
       }
   });
}

HTML

<input *ngIf="form.get('someCheckboxControl').value" formControlName="remoteLocations"</input>
0
Ben Racicot