Disable validation for hidden fields Angular-CodePudding

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
      
      #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
    
    [hidden]="health_policy_number.valid || (health_policy_number.pristine && !healthForm.submitted)"
  >
    Policy number required.
  </small>
  <br />
  <select id="healthDropdown" >
    <option value="memberID">Member ID</option>
    <option value="DOB">Date of Birth of Proposer</option>
  </select>
  <br />
  <div >
    <input
      
      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 >
    <div >
      <input
        
        autocomplete="false"
        type="text"
        name="healthDate"
        id="datepicker"
        placeholder=""
        [(ngModel)]="healthDate"
      />
      <span><img src="assets/images/calendar.png" /></span>
    </div>
  </div>
  <br />
  <div >
    <input
      type="checkbox"
      id="checkbox-1-2"
      name="health_terms"
      #healthTerms="ngModel"
      ngModel
      
      required
    />
    <label for="checkbox-1-2"></label>
    <span
      >I have read the
      <a
        href="#"
        disabled
        data-toggle="modal"
        data-target="#terms_condition_modal_kgi"
        
        >Terms and Conditions</a
      >
      and agree to abide by the same.</span
    >
    <br />
    <small
      
      [hidden]="healthTerms.valid || (healthTerms.pristine && !healthForm.submitted)"
      >Please accept terms and conditions</small
    >
  </div>
  <button
    
    type="submit"
    [disabled]="!healthForm.valid || !healthTerms"
  >
    Submit
  </button>
</form>

CodePudding user response：

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

CodePudding user response：

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
      
      #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()