web-dev-qa-db-ja.com

Angular 6すべての入力を行う方法フォーム内の編集不可能な要素

すべてのフィールドを無効にして作成する方法はありますか編集不可(input / mat-select / textfield / option/input/mat-checkbox etc)フォーム内

Angular/Angular-material？（それらを編集することはできません）

@Component({
  templateUrl: './leaseholder.component.html'
})
export class LeaseholderComponent implements OnInit, IFormDirtyWarningComponent {

  leaseholderForm: FormGroup;

  constructor(private router: Router, private formBuilder: FormBuilder) {
    this.createLeaseholderForm();
  }

  createLeaseholderForm() {
    this.leaseholderForm = this.formBuilder.group({
      civility: [this.identityModel.civility],
      firstName: [this.identityModel.firstName, Validators.compose([Validators.pattern("[^\\d]+")])],
      lastName: [this.identityModel.lastName, Validators.compose([Validators.pattern("[^\\d]+")])],
      birthName: [this.identityModel.birthName, Validators.compose([Validators.pattern("[^\\d]+")])],
      birthDate: [this.identityModel.birthDate],
      birthPlace: [this.identityModel.birthPlace, Validators.compose([Validators.pattern("[^\\d]+")])],
      nationality: ['FR', this.identityModel.nationality],
      endOfStay: [this.identityModel.endOfStay]
    });
  }

    <form [formGroup]="leaseholderForm" (ngSubmit)="onSubmit()">
                <div class="mat-radio-group-inverted">
                    <mat-radio-group formControlName="civility">
                        <mat-radio-button color="primary" value="MR">M.</mat-radio-button>
                        <mat-radio-button color="primary" value="MME">MME.</mat-radio-button>
                    </mat-radio-group>
                </div>
                <mat-form-field>
                    <input matInput upperCaseInput placeholder="Nom d'usage" formControlName="lastName">
                </mat-form-field>
...........................
..........  example
    </form>
javascriptangularangular-material
11
Anouar Mokhtari

リアクティブフォームを使用している場合は、次のようにプログラムでこれを実現できます（1つずつ）。

_ this.formGroupName.controls[controlNmae].disable();
_

例：this.formGroupName.controls['lastName'].disable()

すべてを一度に無効にするには：

_this.formGroupName.disable()
_

あなたの場合は：this.leaseholderForm.disable()
そしてそれを元に戻すには：this.leaseholderForm.enable()

あなたができることは、このような関数を作成し、createLeaseholderForm()を呼び出した後にそれを呼び出すことです：

_disableForm() {
 this.leaseholderForm.disable()
}  
_

詳細は this を参照してください。

15
BlackBeard

無効と編集不可は必ずしも同じではありません。無効化された入力ももちろん編集可能ではありませんが、明確に表示され、グレー表示され、「無効化」されているように見えます。読み取り専用の入力は通常の入力と同じように見えますが、編集できません。そのため、コントロールを実際に無効にするか、読み取り専用にするかを尋ねる必要があります。読み取り専用にしたいようです。これを行うには、<input>のreadonlyプロパティを使用して、それをコントローラーの変数にバインドするだけです。例えば：

export class LeaseholderComponent implements OnInit, IFormDirtyWarningComponent {

    @Input() editable: boolean = false; // doesn't have to be an @Input
    ...
}

<form [formGroup]="leaseholderForm" (ngSubmit)="onSubmit()">
    <mat-form-field>
        <input matInput [readonly]="!editable" upperCaseInput placeholder="Nom d'usage" formControlName="lastName">
    </mat-form-field>
    ...
</form>

editableプロパティは@Inputである必要はありませんが、フォームを再利用可能なコンポーネントとして使用していて、編集可能/読み取り専用の決定を行う必要がある場合に役立ちます。 DOMレベル。

ラジオボタンなど、readonlyプロパティを使用できない他のコンポーネントについては、レイアウトを再考する必要があります。オプションの完全なリストではなく、別のコンポーネントを使用して無線オプションを読み取り専用モードで表示する方が理にかなっている場合があります。たとえば、ラベルと値のペアを使用します。

<div *ngIf="editable; else readonlyRadio" class="mat-radio-group-inverted">
    <mat-radio-group formControlName="civility">
        <mat-radio-button color="primary" value="MR">M.</mat-radio-button>
        <mat-radio-button color="primary" value="MME">MME.</mat-radio-button>
    </mat-radio-group>
</div>
<div #readonlyRadio>
    <label>Civility</label>
    <span>{{ leaseholderForm.controls['civility'].value }}</span>
</div>
19
G. Tranter

disabled属性が一部のコンポーネントで機能しないため、私が行ったのはpointer-events：noneをcssに設定して、divコンテンツ内のすべてのコンポーネントをカバーすることです。

これが私のCSSコードです：

.disabledDiv {
      pointer-events: none;
      opacity: 0.4;   }

これが私のHTMLです：

<div class="content-area" [ngClass]="{disabledDiv: !isActiveDiv}"> 
    <!-- other components here (input/select/etc.) -->
<div>

そして私のTSで：

editData() {
    this.isActiveDiv = true;
  }
5
KimCindy

ここで説明されているようにFormGroupを作成します。

https://angular.io/guide/reactive-forms#add-a-formgroup

次に、formGroupインスタンスをプログラムで取得し、次のようにそのインスタンスで.disable()を呼び出します。

this.leaseholderForm.disable()

1
ggradnig

HTMLテンプレートでdisable属性を使用します。

           <mat-form-field>
                <input matInput upperCaseInput placeholder="Nom d'usage" formControlName="lastName" disable>
            </mat-form-field>
1
Aditya
this.formGroupName.controls['lastName'].disable()

Angular 8.では機能しませんでした。そのため、HTML内に 'readonly'属性を追加し、.tsファイルの値を変更することで機能しました。

。htmlファイル内

 <input formControlName="email" matInput type="email" #email email="true" [readonly]="email_readonly" />

。tsファイル内

email_readonly = false;

yourFunction()
{
  this.email_readonly = true;
}
0
Nishant Kohli