Disable validation for hidden fields Angular

user_17825271 0
Viewed 287

When I enter data in input and select date from dropdown then our submit button is not getting enabled. If we are select memberId from dropdown there is a field show of memberId otherwise it remains hidden. If we select the date from dropdown then the field of date shows otherwise hidden. how to enable submit button when we enter the data in input field and pick the date from dropdown.

<form
  #healthForm="ngForm"
  name="healthForm"
  (ngSubmit)="registerHealthPolicy(healthForm.value,healthForm.valid)"
>
  <label>Policy / Proposal Number</label>
  <div>
    <input
      class="input-box"
      #health_policy_number="ngModel"
      oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
      maxlength="20"
      type="number"
      name="policyNumber"
      [(ngModel)]="healthPolicyNumber"
      placeholder="Enter Policy Number"
      required
    />
  </div>
  <small
    class="validation-error"
    [hidden]="health_policy_number.valid || (health_policy_number.pristine && !healthForm.submitted)"
  >
    Policy number required.
  </small>
  <br />
  <select id="healthDropdown" class="select-policy select-policy-dropdown">
    <option value="memberID">Member ID</option>
    <option value="DOB">Date of Birth of Proposer</option>
  </select>
  <br />
  <div class="member-id">
    <input
      class="input-box"
      oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
      maxlength="20"
      type="number"
      name="healthMemberId"
      [(ngModel)]="healthMemberId"
      placeholder="Member ID"
      required
    />
  </div>
  <div class="date-box">
    <div class="date-container">
      <input
        class="input-box"
        autocomplete="false"
        type="text"
        name="healthDate"
        id="datepicker"
        placeholder=""
        [(ngModel)]="healthDate"
      />
      <span><img src="assets/images/calendar.png" /></span>
    </div>
  </div>
  <br />
  <div class="terms-container">
    <input
      type="checkbox"
      id="checkbox-1-2"
      name="health_terms"
      #healthTerms="ngModel"
      ngModel
      class="regular-checkbox"
      required
    />
    <label for="checkbox-1-2"></label>
    <span
      >I have read the
      <a
        href="#"
        disabled
        data-toggle="modal"
        data-target="#terms_condition_modal_kgi"
        class="condition"
        >Terms and Conditions</a
      >
      and agree to abide by the same.</span
    >
    <br />
    <small
      class="validation-error"
      [hidden]="healthTerms.valid || (healthTerms.pristine && !healthForm.submitted)"
      >Please accept terms and conditions</small
    >
  </div>
  <button
    class="sbmt-btn"
    type="submit"
    [disabled]="!healthForm.valid || !healthTerms"
  >
    Submit
  </button>
</form>
angular
2 Answers

You can add [disabled] to the input element similar to [hidden], then it should not trigger the validations

user_60195630

The problem is that some of your js code in the view is not in angular`s scope

namelly these:

(....)

  oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
      
(....)

   oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"

You might want to look into reactive forms for validation and manipulation of form data.

Using it your input would become something like

<form [formGroup] = "yourForm">
(...)

<input
      class="input-box"
      #health_policy_number="ngModel"
      type="number"
      name="policyNumber"
      formControlName="healthPolicyNumber"
      placeholder="Enter Policy Number"
    />
(...)
</form>

and you'd have to add the form to your component

export class YourComponent implements OnInit {
(...)
yourForm: FormGroup;

(...)

  constructor(private fb: FormBuilder){
    this.yourForm = fb.group({
      healthPolicyNumber: [null, [Validators.maxLength(this.maxLength)]]
    })
  }

  ngOnInit() {
    this.yourForm.valueChanges.subscribe(formValues => {
      // every time the values change on your inputs, the formValues variable this function is called. you place your code here
    });
  }

  onClickformSubmit() {
    //function for you to add to an onclick action of a button on your template
    if (this.yourForm.invalid) return;
    

    // here you do something with your validated form values   -- this.yourForm.value
    
  }

(...)  
}

to disable/enable the input, you control it from the component code with:

this.yourform.get('healthPolicyNumber').disable()

or

this.yourform.get('healthPolicyNumber').enable()
user_46046450
Related