validation for field

Author: SergeyPirogov

src/app/add-theme/add-theme.component.html

@@ -12,12 +12,15 @@
         <div class="form-group mb-2">
           <label for="themeTitle">Theme for the next QAGuild podcast episode</label>
           <input type="text" formControlName="title" placeholder="Theme text" name="title" class="form-control" id="themeTitle" required>
-          <div *ngIf="added" class="valid-feedback">
+          <!-- <div *ngIf="submitted && added" class="valid-feedback">
               Your record sucesfully added! Thank you!
-          </div>
-          <div *ngIf="error" class="invalid-feedback">
+          </div> -->
+          <div *ngIf="submitted && error" class="invalid-feedback">
               {{ error.error.message }}
           </div>
+          <div *ngIf="submitted && f.title.errors" class="invalid-feedback">
+              <div *ngIf="f.title.errors.required || f.title.errors.minlength">Field must be at least 10  characters</div>
+          </div>
         </div>
         <button type="submit" class="btn btn-outline-success">Add theme</button>
       </form>

src/app/add-theme/add-theme.component.ts

@@ -14,8 +14,10 @@ export class ProposeThemeComponent implements OnInit {
 
   addForm: FormGroup;
   themes: Theme[];
-  added: boolean
-  error: Object
+  error: Object;
+  validation: string;
+  submitted:boolean = false;
+  added: boolean = false;
 
   constructor(private formBuilder: FormBuilder, 
               private router: Router, 
@@ -24,19 +26,30 @@ export class ProposeThemeComponent implements OnInit {
 
   ngOnInit() {
     this.addForm = this.formBuilder.group({
-      title: ['', Validators.required]
+      title: ['', [Validators.required, Validators.minLength(10)]]
     });
     this.episodeService.getAllThemesWithoutEpisode().subscribe(data => this.themes = data);
   }
 
+  // convenience getter for easy access to form fields
+  get f() { return this.addForm.controls; }
+
+
   onSubmit() {
+    this.submitted = true;
+    // stop here if form is invalid
+    if (this.addForm.invalid) {
+      return;
+    }
+
     this.episodeService.addFreeTheme(this.addForm.value)
       .subscribe(data => { 
         this.addForm.reset() 
         this.getAllThemesWithoutEpisode();
-        this.added = true;
+        this.submitted = false;
       },
       error => {
+        this.submitted = false;
         console.error(error)
         this.error = error;
       });