added form into vue to send message

src/app/components/message-form/message-form.component.html

@@ -1,3 +1,8 @@
-<p>
+<form [formGroup]="messageForm" class="relative">
-    message-form works!
+    <ion-item lines="none" class="rounded-2xl border border-stone-200 fixed bottom-4 left-4 right-4">
-</p>
+        <ion-input placeholder="Envoyer un message ..." formControlName="libelle"></ion-input>
+        <ion-button style="--background: white">
+            <ion-icon name="send-outline" class="text-xl text-stone-400"></ion-icon>
+        </ion-button>
+    </ion-item>
+</form>

src/app/components/message-form/message-form.component.ts

@@ -1,16 +1,23 @@
-import {Component, OnInit} from '@angular/core';
+import {Component} from '@angular/core';
+import {IonicModule} from "@ionic/angular";
+import {FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
+import {addIcons} from "ionicons";
+import {sendOutline} from 'ionicons/icons';
+addIcons({
+    "send-outline" : sendOutline
+})
 
 @Component({
     selector: 'app-message-form',
     templateUrl: './message-form.component.html',
     styleUrls: ['./message-form.component.scss'],
+    imports: [
+        IonicModule,
+        ReactiveFormsModule
+    ]
 })
-export class MessageFormComponent implements OnInit {
+export class MessageFormComponent {
-
+    messageForm: FormGroup = new FormGroup({
-    constructor() {
+        libelle: new FormControl<string>(null, [Validators.required]),
-    }
+    })
-
-    ngOnInit() {
-    }
-
 }

src/app/pages/home/home.component.html

@@ -50,6 +50,7 @@
     @if (groupSelected()) {
         <app-modal>
             <app-message [groupId]="groupSelected().id"></app-message>
+            <app-message-form></app-message-form>
         </app-modal>
     }
 </ion-content>

src/app/pages/home/home.component.ts

@@ -29,6 +29,7 @@ import {GroupsComponent} from "../../components/groups/groups.component";
 import {GroupFormComponent} from "../../components/group-form/group-form.component";
 import {GroupInfoComponent} from "../../components/group-info/group-info.component";
 import {MessageComponent} from "../../components/message/message.component";
+import {MessageFormComponent} from "../../components/message-form/message-form.component";
 
 addIcons({
     'profile': personOutline,
@@ -61,6 +62,7 @@ type View = 'menu' | 'profile' | 'password' | 'designation' | 'gallery' | 'group
         GroupFormComponent,
         GroupInfoComponent,
         MessageComponent,
+        MessageFormComponent,
     ]
 })
 export class HomeComponent implements OnInit {