Discussion :

[Laetidin]

Bonjour,

Je travaille sur un fomulaire d'ajout de bâtiments qui possèdent une architecture spécifique. Je souhaiterais faire en sorte que l'utilisateur soit obligé d'ajouter un fichier pour pouvoir valider et envoyer le formulaire mais je n'y arrive pas. Quelqu'un aurait une piste ?



Mon html ( je n'ai pas insérer toute la liste des inputs )

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 <h2 class="ion-text-center"><U>Ajouter une maison</U></h2>
        <div><ion-button id="snap" formCo(click)="swalFileupload()" expand="block"><ion-icon name="image" slot="start"></ion-icon>Ajouter une photo</ion-button></div>
        <form [formGroup]="form"  (ngSubmit)="onSubmitSimpleForm()">
 
              <!-- INPUT CITY -->
              <ion-item >
                <ion-label class="ion-padding">Localité</ion-label>
                <ion-input formControlName="city" class="form-control" type="text" placeholder="Entrez la localité"></ion-input>
              </ion-item>
 
            <!-- INPUT STREET-->
            <ion-item>
                <ion-label class="ion-padding">Adresse</ion-label>
                <ion-input formControlName="street" class="form-control" type="text" placeholder="Entrez une adresse"></ion-input>
            </ion-item>

Mes validators :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
private creatSimpleForm() {
    this.form = this.formBuilder.group({
      city: new FormControl ('', Validators.compose([
        Validators.minLength(3),
        Validators.maxLength(40),
        Validators.pattern('^[a-zA-Zéèàç_.-]+$'),
        Validators.required
      ])),
      department: new FormControl ('', Validators.compose([
        Validators.minLength(2),
        Validators.maxLength(10),
        Validators.pattern('^((0[1-9])|([1-8][0-9])|(9[0-8])|(2A)|(2B))[0-9]+$'), // Seuls les lettres A et B sont autorisés (pour les codes postaux de Corse)
      ])),
      creationDate: new FormControl('', Validators.compose([
          Validators.minLength(1),
          Validators.maxLength(4),
          Validators.pattern('-?[0-9]+$'),
      ])),
      destructionDate: new FormControl('', Validators.compose([
        Validators.minLength(1),
        Validators.maxLength(4),
        Validators.pattern('-?[0-9]+$'),
      ])),
      street: new FormControl ('', Validators.compose([
        Validators.minLength(1),
        Validators.maxLength(255),
        Validators.pattern('[0-9]+(?:[A-Za-z0-Zéèçûü9.,\'-]+[ ]?)+') //Exige à l'utilisateur de commencer par le numéro de la voie
      ])),
      lat: new FormControl ('', Validators.compose([
        Validators.minLength(0),
        Validators.maxLength(255),
        Validators.required
      ])),
      lng: new FormControl ('', Validators.compose([
        Validators.minLength(0),
        Validators.maxLength(255),
        Validators.required
      ])),
 
      comments: new FormControl(''),
      mediaDate: new FormControl(this.mediaDate, [Validators.required]),
      category: new FormControl(this.category)
    });
 
public onSubmitSimpleForm() {
    if (this.files) {
      this.uploadService.toBlobFile(this.files).then((result) => {
        this.postHouse(this.form.value.city, this.form.value.creationDate, this.form.value.destructionDate,
            this.form.value.street, this.form.value.department, {lat: this.lat, lng: this.lng}, this.form.value.comments, result);
      });
    } else {
      this.postHouse(this.form.value.city, this.form.value.creationDate, this.form.value.destructionDate,
          this.form.value.street, this.form.value.department, {lat: this.lat, lng: this.lng}, this.form.value.comments);
    }
  }

[dukoid]

https://stackblitz.com/edit/file-upl...component.html