added form into vue to send message

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

@@ -1,3 +1,8 @@
-<p>
-    message-form works!
-</p>
+<form [formGroup]="messageForm" class="relative">
+    <ion-item lines="none" class="rounded-2xl border border-stone-200 fixed bottom-4 left-4 right-4">
+        <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 {
-
-    constructor() {
-    }
-
-    ngOnInit() {
-    }
-
+export class MessageFormComponent {
+    messageForm: FormGroup = new FormGroup({
+        libelle: new FormControl<string>(null, [Validators.required]),
+    })
 }