web-dev-qa-db-ja.com

Angular 5入力フィールドの正しい方法を無効にする

そのように作成されたFormGroupがあります。

form: FormGroup;

constructor(private _formBuilder: FormBuilder) { }

this.form = this._formBuilder.group({
  name: ['', Validators.required],
  email: ['', Validators.required, Validators.email]
});

イベントが発生したら、これらの入力を無効にしたいので、追加したHTMLに次のように追加しました。

<input class="form-control" placeholder="Name" name="name" formControlName="name" [(ngModel)]="name" autocomplete="off" [disabled]="isDisabled" required>

<input class="form-control" placeholder="Email" name="email" formControlName="email" [(ngModel)]="email" email="true" autocomplete="off" [disabled]="isDisabled" required>

isDisabledは変数です。このイベントが発生すると、trueに切り替わります。

ご想像のとおり、次のメッセージが表示されます。

リアクティブフォームディレクティブでdisabled属性を使用しているようです。コンポーネントクラスでこのコントロールを設定するときにdisabledをtrueに設定すると、実際にはDOMでdisabled属性が設定されます。 「変更後のチェック」エラーを回避するために、このアプローチを使用することをお勧めします。

  Example: 
  form = new FormGroup({
    first: new FormControl({value: 'Nancy', disabled: true}, Validators.required),
    last: new FormControl('Drew', Validators.required)
  });

そのため、この警告が示す例と少しの検索で、コントロールを次のように宣言する必要があることがわかりました。

name: [{ value: '', disabled: this.isDisabled }, Validators.required]

問題は、次のとおりです。変数がtrue/falseの間で変更された場合、無効/有効を切り替えません

入力を有効にするか無効にするかを変数で制御する正しい方法はどのようになりますか？

手動で行うのは望ましくありません（例：this.form.controls['name'].disable()）。これはあまり反応的な方法とは思えないため、大量のメソッド内で呼び出す必要があります。おそらく良い習慣ではありません。

どうも

javascripthtmlangularangular-forms
13
João Ghignatti

次のように、セッターメソッドへの変数の割り当てを変更できます。

set isDisabled(value: boolean) {
 this._isDisabled = value;
 if(value) {
  this.form.controls['name'].disable();
 } else {
    this.form.controls['name'].enable();
  }
}
12
Bruno Silva

フォームコントロールを無効にする適切な方法。リアクティブフォームでは、テンプレートからの入力を無効にしないでください。したがって、コンポーネントのどのメソッドを呼び出している場合でも、次のように入力を無効にする必要があります。

this.form.get('name').disable();
3
Sandra Willford

1つの解決策は、ディレクティブを作成し、そのバインディングを使用して here

import { NgControl } from '@angular/forms';

@Directive({
  selector: '[disableControl]'
})
export class DisableControlDirective {

  @Input() set disableControl( condition : boolean ) {
    const action = condition ? 'disable' : 'enable';
    this.ngControl.control[action]();
  }

  constructor( private ngControl : NgControl ) {
  }

}

それから

<input class="form-control" placeholder="Name" name="name" formControlName="name" autocomplete="off" [disableControl]="isDisabled" required>
3
Reza

入力には、[無効]ではなく[読み取り専用]を使用します。動作します

1
Salim Hamidi

Angular 7のTextBoxを無効にします

<div class="center-content tp-spce-hdr">
  <div class="container">
    <div class="row mx-0 mt-4">
      <div class="col-12" style="padding-right: 700px;" >
          <div class="form-group">
              <label>Email</label>
                <input [disabled]="true" type="text" id="email" name="email" 
                [(ngModel)]="email" class="form-control">
          </div>
     </div>
   </div>
 </div>
1
Rahul Seth

私が想像するのは、クリーンでもドライでもない。 Bu「set method」を試してみたところ、すぐに動作しませんでした...

リファクタリングが必要（）=> {simpleVersion}（誰かの助けになることを願っています）

component.ts

...
  // standard stuff...
  form: FormGroup;
  isEditing = false;
...
  // build the form...
  buildForm() {
    this.form = this.FormBuilder.group({
      key: [{value:'locked', disabled: !this.isEditing}],
      name: [],
      item: [],
      active: [false]
    })
  }
  // map the controls to "this" object
  // => i.e. now you can refer to the controls directly (ex. this.yourControlName)
  get key() { return <FormControl>this.form.get('key') }
  get name() { return <FormControl>this.form.get('name') }
...
  // ----------------------------------------
  //     THE GRAND FINALÉ - disable entire form or individual controls
  // ----------------------------------------
  toggleEdit() {
    if(!this.isEditing) {
      this.key.enable();      // controls
      this.name.enable();
      // this.form.enable();     // the form

      this.isEditing = !this.isEditing;
    } else {
      this.key.disable();      // the controls
      this.name.disable();     // the controls

      // this.form.disable();     // or the entire form

      this.isEditing = !this.isEditing;
    }
   }

おそらくHTMLロジックが過剰になっているので、ボーナスの統合されたngClassトグルが同じように役立つことを願っています。

component.html（トグルボタン）

<div class="btn-group" (click)="toggleEdit()">
           <label
             class="btn"
             role="button"
             [ngClass]="{'btn-success': isEditing,
                         'btn-warning': !isEditing}">toggle edit
           </label>
</div>
1
Joe Code

リアクティブフォームでは、this.form.disable()によってすべてのフォームフィールドを無効にできます。テンプレート駆動型フォームでは、this.myform.form.disable()（myFormは@ViewChild('form') myForm;）によってすべてのフォームフィールドを無効にできます。

1
Aqeel Bahoo

クリック時にコントロールを有効にする機能があります。

  controlClick(control: any) {
      this.form.controls[control.ngControl.name].enable();
  }

もともと私は使用していました

  control.disabled = false;

しかし、これは<input>などのmat-chip-listを含むコントロールでは機能しませんでした。

FormGroupを使用し、コンストラクターで各コントロールを無効にします

  constructor(
    private fb: FormBuilder,
    private dialogRef: MatDialogRef<EditDialogComponent>,
    @Inject(MAT_DIALOG_DATA) data
  ) {
    this.data = data;
    this.multiEdit = data.multiSelect;

    this.form = new FormGroup({
      autoArchive: new FormControl({
        value:
          this.getPreFill(data.selectedPolicy.autoArchive, this.multiEdit),
        disabled: true
        /*, Validators.required*/
      }),

...

  <mat-form-field (click)="controlClick(retrieveChipList)">
      <mat-chip-list #retrieveChipList formControlName="retrieveChipList">
        <mat-chip
        *ngFor="let email of data.selectedPolicy.retrieveEmailsToBeNotified" 
          (removed)="remove(email)" [selectable]="selectable"
          [removable]="removable" 
        >
          {{ email }}
          <mat-icon matChipRemove>cancel</mat-icon>
        </mat-chip>
        <input
        placeholder="Retrieve Emails to be Notified" 
        formControlName="retrieveChipList"
          [matChipInputFor]="retrieveChipList"
          [matChipInputAddOnBlur]="true"
          [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
          (matChipInputTokenEnd)="addRetrieveEmails($event)"
        />
      </mat-chip-list>
    </mat-form-field>
0
ldgorman