web-dev-qa-db-ja.com

formControlを読み取り専用にする方法

angular readonlyでformControlを作成する方法

私はHTMLのようにそれを行うことができることを知っています

<input type="text" formControlName="xyz" readonly />

htmlではなくJSコードから行う方法、つまりモデル駆動型の方法

angularangular-reactive-forms
15
Ankit Raonka

リアクティブフォームを使用している場合は、以下のサンプルコードのように動的に割り当てることができます（メールフィールド）

this.registerForm = this.formBuilder.group({
      first_name: ['', Validators.required],
      last_name: ['', Validators.required],
      email: new FormControl({value: null, disabled: true}, Validators.required),
      password: ['', Validators.compose([Validators.required, Validators.email])],
      confirm_password: ['', Validators.required],
});

無効なコントロールを含むすべての値を取得する場合は、次を使用する必要があります。

this.registerForm.getRawValue();

ソースコードのメソッドコメントを表示する

/**
   * The aggregate value of the `FormGroup`, including any disabled controls.
   *
   * If you'd like to include all values regardless of disabled status, use this method.
   * Otherwise, the `value` property is the best way to get the value of the group.
   */
  getRawValue(): any;

コーディングをお楽しみください！

22
Ervin Llojku

私の推測では、反応型（Angular 2+）では[〜＃〜] readonly [〜＃〜]の使用はありません。

通常のHTML、CSSベースのプロジェクト

[〜＃〜] readonly [〜＃〜]属性を使用して、ユーザーがフォームコントロールを入力/選択できないようにしますが、入力から値を取得します。

[〜＃〜] disabled [〜＃〜]属性を使用して、ユーザーがフォームコントロールを入力/選択できないようにし、入力から値を取得しません。

Angular 2+ CLIベースのプロジェクト

ユーザーがタイプ/選択できないようにするために[〜＃〜] readonly [〜＃〜]属性は必要ありません。 [〜＃〜] disabled [〜＃〜]属性はユーザーがタイプ/選択できないようにするのに十分であり、無効な入力/選択/チェックボックス/ラジオフィールドから値を取得することもできるためです。

モデル駆動型の方法でフィールドに無効属性を追加できます

FormGroupの作成中

this.formGroupName = this.fb.group({
    xyz: [{ value: '', disabled: true }, Validators.required]
});

実行時

this.formGroupName.get('xyz').disable({ onlySelf: true });

FormGroupから値を取得（編集済み）

無効化されていないフィールドからのみ値を取得するには

this.formGroupName.value;

FormGroup内のすべてのフィールドの値を取得するため

this.formGroupName.getRawValue();

したがって、ここではREADONLY属性は必要ありません。それが役に立てば幸い。

10
silambarasan R.D

任意のhtml属性を使用し、[]を使用してangularでバインドします。

そのため、そのコントロールの属性readonlyに属性バインディングを使用できます

例えば

<input type="text" formControlName="xyz" [readonly]="anyBooleanPropertyFromComponent" />

6
Steve

無効に設定すると、formControlベースの要素は読み取り専用になります。

this._formBuilder.group({
        some: new FormControl(
          { value: parseInt(this.myobject.subObject.stringMember), disabled: true },
          Validators.required
        ),

しかし、これはIEに当てはまり、ChromeですがFirefoxには当てはまりません....

人気のある回避策は、入力にFirefox固有の透明な<div>を追加し、透明なdivをクリックすると入力コントロールを有効化することです。

css：

#wrapper {
  position: relative;
  &::after {
    content: "%";
    position: absolute;
    right: 10px;
    top: 10px;
  }
}
#click {
  width: 100%;
  height: 35px;
  position: absolute; 
  background: transparent;
}

html：

 <label>
    <span class="label">Name </span>
    <div id="wrapper">
      <div
        *ngIf="isFirefox"
        id="click"
        (click)="enable('name')"
      ></div>-->
      <input type="text" formControlName="name" readonly />
    </div>
  </label>

TypeScript：

export class MyObjectComponent implements OnInit {
  @Input() public group: FormGroup;
  isFirefox = /Firefox\//i.test(window.navigator.userAgent);

  constructor() {}

  ngOnInit() {}

  enable(name) {
    this.group.get(name).enable();
  }
}

ただし、このソリューションは「<input>」要素でのみ機能し、ネストされたFormControlを使用している場合は「<textarea>」要素や「<input>」要素では機能しません。

実際の解決策は、formcontrolを無効に設定しないことです。

this._formBuilder.group（{some：new FormControl（{value：parseInt（this.myobject.subObject.stringMember）、disabled：false}、Validators.required）、

そして、同時に、またはを読み取り専用に設定するには：

  <label>
    <span class="label">SomeLabel</span>
    <textarea
      maxlength="500"
      formControlName="some"
      readonly
    ></textarea>
  </label>

または入力：

<input type="text" formControlName="name" />
0
user1767316