Angulaire 6 comment faire de la saisie de tous n'est Pas modifiable élément à l'intérieur d'un formulaire

Est-il un moyen de les désactiver et de faire tous les champs non modifiable
(input /mat-select /textfield /option/input/mat-checkbox etc) à l'intérieur d'une Forme

en disant seulement le div parent nom Angulaire /Angulaires-le matériel ?
(ne peut pas 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>

InformationsquelleAutor Anouar Mokhtari | 2018-06-25

10

Si vous utilisez la forme réactive vous pouvez le faire par programme comme ceci (une par une approche):
```
 this.formGroupName.controls[controlNmae].disable();
```
Par exemple: this.formGroupName.controls['lastName'].disable()

Pour désactiver tous à la fois:
```
this.formGroupName.disable()
```
Dans votre cas: this.leaseholderForm.disable()

Et pour le rallumer n': this.leaseholderForm.enable()

Ce que vous pouvez faire est de créer une fonction comme celle-ci et de l'appeler après avoir appelé createLeaseholderForm():
```
disableForm() {
 this.leaseholderForm.disable()
}  
```
pour plus d'informations, lisez cette.
- merci, mais n'est pas faire de la saisie de tous les champs Non modifiables... peut-être que j'ai du modifier le DOM directement un par un
- plaese partager le code
- Fait, je ne suis pas sûr , que .désactiver (), tourner à tous les domaines de la forme, Non modifiable , je pense que désactiver un Contrôle de formulaire
- svp essayez la solution mise à jour. C' devrait de travail.
- Je suis d'accord. Cela devrait fonctionner, comme le montre ici. @AnouarMokhtari - Pas d'erreur dans la console?
- ouaip c'est le travail très bien , merci Monsieur
- Gardez à l'esprit qu'un handicapé <input> ne pas soumettre avec le formulaire, mais un readonly <input> ne.
- Buenaso! c'est ce dont j'ai besoin! Merci!!!!
InformationsquelleAutor BlackBeard
9

Handicapés et non modifiable ne sont pas nécessairement la même chose. Une désactivé entrée est bien sûr pas modifiable, mais il a une apparence distincte - grisées et regarde "personnes handicapées". Une entrée en lecture seule est le même qu'une entrée normale, mais n'est pas modifiable. Donc, vous avez à vous demander si vous voulez que vos contrôles effectivement désactivé ou tout simplement en lecture seule. Il semble que vous voulez juste en lecture seule. Pour ce faire, vous avez juste besoin d'utiliser le readonly propriété 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>
```
Noter que le editable propriété n'a pas besoin d'être un @Input, mais qui pourrait être utile si vous utilisez le formulaire sous la forme d'un composant réutilisable et la nécessité de faire la editable/en lecture seule décision du DOM niveau.

Pour d'autres composants comme des boutons radio, où aucun readonly propriété est disponible, vous devriez probablement repenser la mise en page. Il pourrait faire plus de sens d'utiliser un autre composant pour afficher l'option radio en mode lecture seule, plutôt que la liste complète des options. Par exemple, l'utilisation d'une étiquette et la valeur de la paire:
```
<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>
```
- C'est la meilleure solution car elle ne marque pas le terrain comme non valide.
- Oui, c'est la façon correcte de le faire!
InformationsquelleAutor G. Tranter
5

Depuis désactivé attribut ne fonctionne pas sur certains composants, ce que j'ai fait est que j'ai l' pointeur-events:none sur le css pour couvrir tous les composants à l'intérieur de la div contenu.

Voici mon code CSS:
```
.disabledDiv {
      pointer-events: none;
      opacity: 0.4;   }
```
Voici mon code HTML:
```
<div class="content-area" [ngClass]="{disabledDiv: !isActiveDiv}"> 
    
<div> 
```
Et sur mon TS:
```
editData() {
    this.isActiveDiv = true;
  }
```
- Cela m'aide beaucoup! merci!
- Peut encore être consulté et modifié avec la touche Tab. Droit?
InformationsquelleAutor KimCindy
1

Créer un FormGroup comme expliqué ici:

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

Ensuite, prenez le formGroup instance par programme et appel .disable() sur elle, comme ceci:

this.leaseholderForm.disable()
- oui, j'utilise de la forme réactive , je l'ai mise à jour de la question. .désactiver() ne fonctionne pas
- pouvez-vous fournir le code de votre composant contrôleur?
- Fait, je ne suis pas sûr , que .désactiver (), tourner à tous les domaines de la forme, Non modifiable , je pense que désactiver un Contrôle de formulaire
InformationsquelleAutor ggradnig
0

Utilisation disable attribut dans le modèle html.
```
           <mat-form-field>
                <input matInput upperCaseInput placeholder="Nom d'usage" formControlName="lastName" disable>
            </mat-form-field>
```
- Les handicapés de la propriété ne doit pas être utilisé avec des éléments d'entrée dans Angulaire formes réactives. Le contrôle de formulaire doit être désactivé à la place: control = new FomrControl({'value', disabled: true}, [validators]);
InformationsquelleAutor Aditya

Vous devez vous connecter pour publier un commentaire.