How to make the fields active when i choose the option Manuelle and disabled when i choose Automatique , help me please

@Fares95 wrote:

mypage.html

<ion-header>

  <ion-navbar color="tertiary">
    <ion-title>Effectuer-réclamation</ion-title>
  </ion-navbar>

</ion-header>

<ion-content padding>


  <ion-row justify-content-center align-items-center style="height: 100%">
    <p>
      Commencer La Réclamation
    </p>
  <form #f="ngForm" novalidate [formGroup]="Form"  (ngSubmit)="onSubmit(f)" >

            <ion-item>
            <ion-label  multiple="true" stacked> Localisation </ion-label>
                            <ion-select formControlName="localisation">
                            <ion-option> Automatique </ion-option>
                            <ion-option> Manuelle </ion-option>
                            </ion-select>
            </ion-item>
            <ion-item no-lines *ngIf="( Form.get('localisation').hasError('required') ) && Form.get('localisation').touched">

            <div class="error">
            Champ Obligatoire
            </div>
            </ion-item>

            <ion-item>
            <ion-label  multiple="true" stacked disabled >Gouvernorat : </ion-label>
                      <ion-select formControlName="gouvernorat"  >
                          <ion-option >Ariana </ion-option>
                          <ion-option >Béja</ion-option>
                          <ion-option >Ben Arous</ion-option>
                          <ion-option >Bizerte </ion-option>
                          <ion-option >Gafsa</ion-option>
                          <ion-option >Gabès</ion-option>
                          <ion-option >Jendouba</ion-option>
                          <ion-option >Kairouan</ion-option>
                          <ion-option >Kasserine</ion-option>
                          <ion-option >Kébili</ion-option>
                          <ion-option >Le Kef</ion-option>
                          <ion-option >Mahdia</ion-option>
                          <ion-option >La Manouba</ion-option>
                          <ion-option >Médenine</ion-option>
                          <ion-option >Monastir</ion-option>
                          <ion-option >Nabeul</ion-option>
                          <ion-option >Sfax</ion-option>
                          <ion-option >Sidi Bouzid</ion-option>
                          <ion-option >Siliana</ion-option>
                          <ion-option >Sousse</ion-option>
                          <ion-option >Tataouine</ion-option>
                          <ion-option >Tozeur</ion-option>1
                          <ion-option >Tunis</ion-option>
                          <ion-option >Zaghouan</ion-option>
                      </ion-select>
                      </ion-item>

                    <ion-item no-lines *ngIf="( Form.get('gouvernorat').hasError('required') ) && Form.get('gouvernorat').touched">
                    <div class="error">
                    Champ Obligatoire
                    </div>
                    </ion-item>

                          <ion-item>
                          <ion-label  stacked>code postal</ion-label>
                          <ion-input type="number" formControlName="postal" disabled placeholder="3170"></ion-input>
                          </ion-item>

                          <ion-item class="error" *ngIf="!Form.controls.postal.valid  && (Form.controls.postal.dirty || submitAttempt)">

                          <div class="error">
                          Champ de 4 chiffres !
                          </div>
                          </ion-item>

                          <ion-item no-lines *ngIf="( Form.get('postal').hasError('required') ) && Form.get('postal').touched">
                          <div class="error">
                          Champ Obligatoire
                          </div>
                          </ion-item>

                    <ion-item>
                      <ion-textarea  disabled formControlName="adresse" placeholder="Adresse"></ion-textarea>
                    </ion-item>

                      <ion-item no-lines *ngIf="( Form.get('adresse').hasError('required') ) && Form.get('adresse').touched">
                      <div class="error">
                      Champ Obligatoire
                      </div>
                      </ion-item>

                    <ion-item>
                      <ion-textarea  disabled formControlName="description" placeholder="Description textuelle"></ion-textarea>
                    </ion-item>
                    <ion-item class="error" *ngIf="!Form.controls.description.valid  && (Form.controls.description.dirty || submitAttempt)">

                    <div class="error">
                    Non Valide !
                    </div>
                    </ion-item>
                    <ion-item no-lines *ngIf="( Form.get('description').hasError('required') ) && Form.get('description').touched">
                    <div class="error">
                    Champ Obligatoire
                    </div>
                    </ion-item>

                    <ion-item>
                    <ion-label  stacked>Vos fichiers</ion-label>
                    <ion-input type="file" formControlName="fichiers" accept="file_extension|video/*|image/*|media_type"  disabled></ion-input>
                    </ion-item>

                    <ion-item no-lines *ngIf="( Form.get('fichiers').hasError('required') ) && Form.get('fichiers').touched">
                    <div class="error">
                    Champ Obligatoire
                    </div>
                    </ion-item>

                  <ion-col text-center>
                   <button ion-button block color="success" (click)="onEffectuer()" [disabled]="Form.invalid">
                   Effectuer Réclamation
                   </button>
                  </ion-col>

    </form>
    </ion-row>
</ion-content>



<style type="text/css">
.error
{
color:red;
}
</style>

mypage.ts

import { Component } from '@angular/core';
import { NavController, NavParams, ToastController} from 'ionic-angular';
import { FormBuilder, FormGroup, Validators, NgForm, FormControl,ValidatorFn,AbstractControl } from '@angular/forms';
import { EspaceCitoyenPage } from '../espace-citoyen/espace-citoyen';

@Component({
  selector: 'page-effectuer-reclamation',
  templateUrl: 'effectuer-reclamation.html',
})
export class EffectuerReclamationPage {
  private Form : FormGroup;
  public submitAttempt: boolean = false;


  constructor(public navCtrl: NavController, public navParams: NavParams, public toastCtrl: ToastController, private formBuilder: FormBuilder) {
    this.Form = formBuilder.group({

        localisation: ['', Validators.compose([Validators.required ])],
        gouvernorat: ['', Validators.compose([Validators.required])],
        postal: ['', Validators.compose([Validators.required, Validators.minLength(4), Validators.pattern('[0-9]*'), Validators.maxLength(4)])],
        adresse : ['', Validators.compose([Validators.required , Validators.maxLength(60) ])],
        description : ['', Validators.compose([Validators.required, Validators.pattern('[a-zA-Z _]+[a-zA-Z _]') ])],
        fichiers : ['', Validators.compose([Validators.required ])]
        });
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad EffectuerReclamationPage');
  }


onEffectuer() {
this.navCtrl.push(EspaceCitoyenPage);
}


onSubmit(form: NgForm) {
this.submitAttempt= true;
    console.log(form.value);
    const toast = this.toastCtrl.create({
      message: 'Félicitations ; Votre réclamation a été effectué !',
      duration: 3000
    });
    toast.present();
}

}

help me please , i really do not know how to do this

screen capture

Capture.PNG380×812 27.1 KB

Posts: 1

Participants: 1

Read full topic