🚧 feat: criou o componente de inserir novo trecho

Author: CibeleMartins

src/app/app.module.ts

@@ -1,10 +1,11 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+// import { FormsModule } from '@angular/forms';
 
 import { AppRoutingModule } from './app-routing.module';
 
 import {MatCardModule} from '@angular/material/card';
+import {MatFormFieldModule} from '@angular/material/form-field';
 
 
 import { AppComponent } from './app.component';
@@ -17,6 +18,7 @@ import { LoggingService } from './logging.service';
 import { SnippetsComponent } from './components/snippets/snippets.component';
 import { SnippetComponent } from './components/snippet/snippet.component';
 import { NewSnippetComponent } from './components/new-snippet/new-snippet.component';
+import { ReactiveFormsModule } from '@angular/forms';
 
 @NgModule({
   declarations: [
@@ -29,9 +31,11 @@ import { NewSnippetComponent } from './components/new-snippet/new-snippet.compon
   ],
   imports: [
     BrowserModule,
-    FormsModule,
+    // FormsModule,
     AppRoutingModule,
-    MatCardModule
+    MatCardModule,
+    MatFormFieldModule,
+    ReactiveFormsModule
 
   ],
   providers: [AccountService, LoggingService],

src/app/components/new-snippet/new-snippet.component.css

@@ -0,0 +1,9 @@
+textarea {
+    width: 30%;
+    height: 6vw;
+    border: none;
+    outline: none;
+    border-radius: 15px;
+    padding: 20px;
+    cursor: pointer;
+}

src/app/components/new-snippet/new-snippet.component.html

@@ -1 +1,4 @@
-<p>new-snippet works!</p>
+
+<textarea rows="4">
+
+</textarea>

src/app/components/new-snippet/new-snippet.component.ts

@@ -1,15 +1,25 @@
 import { Component, OnInit } from '@angular/core';
-
+import {FormControl, Validators} from '@angular/forms';
 @Component({
   selector: 'app-new-snippet',
   templateUrl: './new-snippet.component.html',
-  styleUrls: ['./new-snippet.component.css']
+  styleUrls: ['./new-snippet.component.css'],
+  
 })
 export class NewSnippetComponent implements OnInit {
 
+  email = new FormControl('', [Validators.required, Validators.email]);
+
   constructor() { }
 
   ngOnInit(): void {
   }
 
+  getErrorMessage() {
+    if (this.email.hasError('required')) {
+      return 'You must enter a value';
+    }
+
+    return this.email.hasError('email') ? 'Not a valid email' : '';
+  }
 }

src/app/components/snippets/snippets.component.html

@@ -1,5 +1,5 @@
 <mat-card class="container">
     <mat-card-content>
-        
+        <app-new-snippet></app-new-snippet>
     </mat-card-content>
 </mat-card>