0

I have create an reactive form with angular material. I have a select dropdown, So based on the dropdown selection. The input fields will change. So now with the below code. If i just submit it, It sending the array to my backend. If i enable the disable option to the button, If cannot submit since my forms has 8 inputs. But when i select one option, It will only have 6 fields. So how can i make the validations inorder to restrict user from submitting empty form.

Below is my HTML Code

<div class = "tp-container">
      <form [formGroup]="myForm" (ngSubmit)="submitForm()">
        <!-- Name -->
        <mat-form-field class="example-full-width" >
          <input matInput placeholder="Name" formControlName="name">
          <!-- error -->
          <mat-error *ngIf="errorHandling('name', 'required')">
            You must provide a <strong> Name</strong>
          </mat-error>
        </mat-form-field>

        <!-- Email -->
        <mat-form-field class="example-full-width">
          <input matInput placeholder="Email" formControlName="email">
          <!-- error -->
          <mat-error *ngIf="errorHandling('email', 'required')">
            You must provide a <strong>email</strong>
          </mat-error>
        </mat-form-field>

            <!-- Class -->
            <mat-form-field>
                <mat-label>Item</mat-label>
                <mat-select [(value)]="selected" formControlName="Items">
                  <mat-option [value]="item" *ngFor="let item of Items">{{item}}
                  </mat-option>
                </mat-select>
              </mat-form-field>

     <!-- Eng Name -->
     <mat-form-field class="example-full-width">
        <input matInput placeholder="Name" formControlName="engname">
        <!-- error -->
        <mat-error *ngIf="errorHandling('engname', 'required')">
          You must provide a <strong>Name</strong>
        </mat-error>
      </mat-form-field>

       <!-- JP Name -->
       <div *ngIf="myForm.get('Items').value == 'Mobile">
       <mat-form-field class="example-full-width" >
        <input matInput placeholder="JP Name" formControlName="jpname">
        <!-- error -->
        <mat-error *ngIf="errorHandling('jpname', 'required')">
          You must provide a <strong> Japanese Name</strong>
        </mat-error>
      </mat-form-field></div>

      <!-- LAN ID Name -->
      <div *ngIf="myForm.get('Items').value == 'Software'">
        <mat-form-field class="example-full-width" >
         <input matInput placeholder="LAN ID" formControlName="lan">
         <!-- error -->
         <mat-error *ngIf="errorHandling('lan', 'required')">
           Please provide your <strong> LAN ID</strong>
         </mat-error>
       </mat-form-field></div>

                    <!-- Application Name -->
      <div *ngIf="myForm.get('Items').value == 'Network'">
        <mat-form-field class="example-full-width" >
         <input matInput placeholder="Application Name" formControlName="app">
         <!-- error -->
         <mat-error *ngIf="errorHandling('app', 'required')">
           Please provide the <strong>Application Name</strong>
         </mat-error>
       </mat-form-field></div>

        <!-- Submit -->
        <div class="button-wrapper">
          <button type="submit" color=#C93C6A class="btn-block" >Submit</button>
        </div>

      </form>
    </div>

Below is my ts file:

import { Component,OnInit, ViewChild } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from "@angular/forms";
import { HttpClient } from '@angular/common/http';

export interface Subject {
  name: string;
}
@Component({
  selector: 'app-lan',
  templateUrl: './lan.component.html',
  styleUrls: ['./lan.component.css']
})
export class LanComponent implements OnInit {

  myForm: FormGroup;

  Items: any = ['Mobile', 'Software','Network','Others'];


  constructor(public fb: FormBuilder,private http: HttpClient,) {}

  public selected = '';
  ngOnInit(): void {
    this.reactiveForm()
  }

  /* Reactive form */
  reactiveForm() {
    this.myForm = this.fb.group({
      name: ['', [Validators.required]],
      email: ['', [Validators.required]],
      Items:[''],
      request: ['Urgent'],
      startdate: ['', [Validators.required]],
      subjects: [this.SubjectsArray],
      engname: ['', [Validators.required]],
      jpname: ['', [Validators.required]],
      lan:['', [Validators.required]],
      soft:['', [Validators.required]],
      server:['', [Validators.required]],
      remarks:['']

    })
  }

  submitForm() {
    var formData: any = new FormData();
    formData.append("name", this.myForm.get('name').value);
    formData.append("email", this.myForm.get('email').value);
    formData.append("Items", this.myForm.get('Items').value);
    formData.append("request", this.myForm.get('request').value);
    formData.append("startdate", this.myForm.get('startdate').value);
    formData.append("subjects", this.myForm.get('subjects').value);
    formData.append("engname", this.myForm.get('engname').value);
    formData.append("jpname", this.myForm.get('jpname').value);
    formData.append("lan", this.myForm.get('lan').value);
    formData.append("soft", this.myForm.get('soft').value);
    formData.append("version", this.myForm.get('version').value);
    formData.append("reason", this.myForm.get('reason').value);
    formData.append("app", this.myForm.get('app').value);
    formData.append("server", this.myForm.get('server').value);
     formData.append("remarks", this.myForm.get('remarks').value);
    formData.append("port", this.myForm.get('port').value);

    console.log(this.myForm)
    this.http.post('API url', this.myForm.value).subscribe(
      (response) => console.log(response),
      (error) => console.log(error))
    console.log("Form Submitted!");
    this.myForm.reset();
  }

}

1 Answer 1

1

you can 2 way to check the validation

 isAddedElement : boolean = false;
 changeForValue() {
    this.isAddedElement.valueChanges.subscribe(x => {
      this.isAddedElement = x;
      if (x) {
        this.myForm.addControl('ctrl1', new FormControl('', Validators.required));
        this.myForm.addControl('ctrl2', new FormControl('', Validators.required));
      } else {
        this.myForm.removeControl('ctrl1');
        this.myForm.removeControl('ctrl2');
      };
    });
  }

HTML

            <div class="row" *ngIf="isAddedElement">
          <div class="col s12">
            <mat-form-field class="example-full-width">
              <input matInput placeholder="ctrl1" required formControlName="ctrl1">
              <mat-error *ngIf="myForm.get('ctrl1').hasError('required')">
                ctrl1 is <strong>required</strong>
              </mat-error>
            </mat-form-field>
          </div>
        </div>
Sign up to request clarification or add additional context in comments.

7 Comments

thank you for the answer.. let me put it this way.. myform has total 16 fields .. but all 16 fields are not visible on the form.. I have few ngif conditions.. when I select network from my drop-down then I can see 10 input fields in this case when I apply any of the 2 solutions it would not work.. since myform will become valid only when all 16 fields are filled.. I hope this clarifies
you can be added this 6 field dynamically valueChange event.
Could please let me know how can I do it? Bit new to angular
I'm edited answer check it. if it ctrl is thair it get valid otherwise it removed.
I have four options.. option 1 need 12 input and option 2 has 8 option 3 has 8 and option 4 has 10 inputs.. in this case will the if conditon based on Boolean value to create new formcontrol?
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.