web-dev-qa-db-fra.com

Angular 6 comment faire toutes les entrées Élément non modifiable dans un formulaire

Existe-t-il un moyen de désactiver et de rendre tous les champs non modifiables(input / mat-select / textfield / option/input/mat-checkbox etc) dans un formulaire

en indiquant uniquement le nom div parent dans Angular/Angular-material? (impossible de les modifier)

@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

Si vous utilisez une forme réactive, vous pouvez y parvenir par programme comme ceci (approche un par un):

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

Par exemple: this.formGroupName.controls['lastName'].disable()

Pour désactiver tout à la fois:

this.formGroupName.disable()

Dans votre cas, faites: this.leaseholderForm.disable()
Et pour le retourner, faites: this.leaseholderForm.enable()

Vous pouvez créer une fonction comme celle-ci et l'appeler après avoir appelé createLeaseholderForm():

disableForm() {
 this.leaseholderForm.disable()
}

pour plus d'informations, lisez this .

15
BlackBeard

Les personnes handicapées et non modifiables ne sont pas nécessairement la même chose. Une entrée désactivée n'est bien sûr pas non plus modifiable, mais elle a une apparence distincte - grisée et semble "désactivée". Une entrée en lecture seule ressemble à une entrée normale, mais n'est pas modifiable. Vous devez donc vous demander si vous souhaitez que vos contrôles soient réellement désactivés ou simplement en lecture seule. On dirait que vous voulez juste en lecture seule. Pour ce faire, il vous suffit d'utiliser la propriété readonly de <input> et le lier à une variable dans votre contrôleur. Par exemple:

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>

Notez que la propriété editable n'a pas besoin d'être un @Input, mais cela peut être utile si vous utilisez le formulaire en tant que composant réutilisable et devez prendre la décision modifiable/en lecture seule au niveau DOM.

Pour d'autres composants comme les boutons radio, où aucune propriété readonly n'est disponible, vous devriez probablement repenser la disposition. Il peut être plus judicieux d'utiliser un composant différent pour afficher l'option radio en mode lecture seule, plutôt que la liste complète des options. Par exemple, utilisez une étiquette et une paire de valeurs:

<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

Étant donné que l'attribut désactivé ne fonctionne pas sur certains composants, ce que j'ai fait est que j'ai défini pointeur-événements: aucun sur le CSS pour couvrir tous les composants à l'intérieur du contenu div .

Voici mon code CSS:

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

Voici mon HTML:

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

Et sur mon TS:

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

Créez un FormGroup comme expliqué ici:

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

Ensuite, récupérez l'instance formGroup par programme et appelez .disable() dessus, comme ceci:

this.leaseholderForm.disable()

1
ggradnig

Utilisez l'attribut disable dans le modèle html.

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

N'a pas fonctionné pour moi dans Angular 8. Je l'ai donc fait fonctionner en ajoutant un attribut 'readonly' à l'intérieur du HTML et ensuite changer sa valeur dans le fichier .ts.

à l'intérieur du fichier .html

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

à l'intérieur du fichier .ts

email_readonly = false;

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