web-dev-qa-db-ja.com

Angularコンポーネントの読み込み時のリアクティブフォームの7つの設定値は、フォームが検証されていなくても保存ボタンを有効にします

次の問題があります。 クリックしてスタックブリッツを確認 。

私はコンストラクタで反応フォームを設定しています：

_this.formGroup = this.fb.group({
      'family_name_en': new FormControl('', Validators.required),
      'family_name_ar': new FormControl('', [Validators.required, Validators.pattern('[\u0600-\u06FF ]*')]),
      'unit_id': new FormControl({ value: '', disabled: true }, [Validators.required])
});
_

ngOnInti()フックで、_unit_id_に関連するデータを取得しています。

プラットフォーム間でデータを移行しているため、アラビア語の姓は推奨されませんでしたが、現在は推奨されています。したがって、ほとんどのデータはアラビア語の名前なしでロードされます。

問題は、ボタンが常に有効になっていることです。ユーザーがこの_unit_id_を更新したい場合は、アラビア語の名前を追加してボタンを有効にする必要があります。

フォームが有効な場合、コンポーネントのロード時にボタンを有効にすることに害はありません。

次に、データを取得してフォームグループコントロールの値を設定するgetData()メソッドを示します。

_ngOnInit() {
    this.getDataById();
}
_

getDataById（）：

_getDataById() {
    this.showSpinner = true;
    this.auth.getDataById(this.unit_id).subscribe(
      (data) => {
        if (data['info'][0]['total'] == 1) {
          this.noDataBool = false;
          this.showSpinner = false;
          this.family_name_en = data['info'][0]['hh_last_name_en'];
          this.formGroup.controls['family_name_en'].setValue(this.family_name_en);
          this.family_name_ar = data['info'][0]['hh_last_name_ar'];
          this.formGroup.controls['family_name_ar'].setValue(this.family_name_ar);
          this.unit_id = data['info'][0]['unit_id'];
          this.formGroup.controls['unit_id '].setValue(this.unit_id);
    }
}
_

ボタン：

_<button mat-raised-button color="warn" (click)="updateData()" [disabled]="!formGroup.valid">
    <mat-icon>update</mat-icon>Update
</button>
_
angularangular6angular-reactive-formsangular7
4
alim1990

FormControlでcontrolsを使用してformGroupsに直接アクセスする代わりに、get AP​​Iを使用する必要があります。これにより、制御が強化され、実装が大幅にクリーンアップされます（特に深くネストされた要素を取得する場合）。次のようにコンポーネントの実装を変更できます。

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';
import { Observable } from 'rxjs/Observable';

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

  formGroup: FormGroup;
  titleAlert: string = 'This field is required';
  post: any = '';
  family_name_en;
  family_name_ar;
  unit_id;
  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    this.formGroup = this.fb.group({
      'family_name_en': new FormControl('', Validators.required),
      'family_name_ar': new FormControl('', [Validators.required, Validators.pattern('[\u0600-\u06FF ]*')]),
      'unit_id': new FormControl({ value: '', disabled: true }, [Validators.required])
    });
    this.getDataById();
  }

  getDataById() {
    let data: Array<any> = [
      'ALi', '', '123'
    ]
    this.family_name_en = data[0];
    this.formGroup.get('family_name_en').setValue(this.family_name_en);
    this.family_name_ar = data[1];
    this.formGroup.get('family_name_ar').setValue(this.family_name_ar);
    this.unit_id = data[2];
    this.formGroup.get('unit_id').setValue(this.unit_id);
  }

}

これが、参照用の Updated StackBlitz です。そこにعليと入力してテストすると、[更新]ボタンが有効になります。 ALiと入力すると、無効のままになります。

7
SiddAjmera

このような状況では、常に次のコードを使用します。

_this.family_name_ar.setValue(data['info'][0]['hh_last_name_ar']);
this.family_name_ar.updateValueAndValidity();
_

2番目のメソッドupdateValueAndValidity()を呼び出すことで、Angular to

コントロールの値と検証ステータスを再計算します。

Angular Docs に関する詳細情報。

これで、_data['info'][0]['hh_last_name_ar']_が空の場合、ボタンは無効になり、フォームは無効になります。

上記の方法は、必要なすべてのフィールドで使用できます。

1
Mihail Stancescu