禁用對隱藏欄位的驗證Angular

當我在輸入中輸入資料并從下拉串列中選擇日期時，我們的提交按鈕未啟用。如果我們從下拉串列中選擇 memberId，則會顯示 memberId 欄位，否則它將保持隱藏狀態。如果我們從下拉串列中選擇日期，則日期欄位將顯示為隱藏。當我們在輸入欄位中輸入資料并從下拉串列中選擇日期時如何啟用提交按鈕。

<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>

uj5u.com熱心網友回復：

您可以添加[disabled]到類似于 的輸入元素[hidden]，那么它不應該觸發驗證

uj5u.com熱心網友回復：

問題是視圖中的一些 js 代碼不在 angular 的范圍內

即這些：

(....)

  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);"

您可能希望研究回應式表單以驗證和操作表單資料。

使用它你的輸入會變成類似

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

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

并且您必須將表單添加到您的組件中

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
    
  }

(...)  
}  

要禁用/啟用輸入，您可以從組件代碼中控制它：

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

or

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

標籤：

上一篇：如何根據有多少鍵將一個物件變成多個物件？

下一篇：從URL下載pdf，而不是在新選項卡中打開