角4つのフォーム、無効なフィールドは常に有効です

Question

奇妙なフォームのように見えるかもしれませんが、私はここの質問のために簡略化しましたが、それは私の実際のフォームではありません。しかし、同じシナリオがここで起こります。

<form (ngSubmit)="submit(form)" #form="ngForm"> 
    <div> 
     Full name: 
     <input name="fullName" required> 
    </div> 
    <div> 
     Would you like to receive birthday gifts from us? 
     <input type="checkbox" name="gifts" [(ngModel)]="isAddressEditable"> 
    </div> 
    <div> 
     Gift shipping address: 
     <input name="giftAddress" required [disabled]="!isAddressEditable"> // false (disabled) by default 
    </div> 

    <button type="submit" [disabled]="form.invalid">Register now!</button> 
</form> 

したがって、3つのフィールドを持つテンプレート駆動フォームがあります。 「今すぐ登録！」フォームが無効である限り、ボタンは無効になります。

「Gift shipping address」フィールドが無効になっている限り、フォーム検証にはカウントされず、完全な名前を入力してフォームを有効にするだけで十分です。

チェックボックスをオンにすると（「私たちの誕生日プレゼントを受け取りますか？」）、入力はもう無効になりません。したがって、検証が適用されます。

これは設計された動作であるかどうかはわかりませんが、無効なフィールドでも検証を適用する方法があるのだろうかと思いました。

Answer 1

私が知る限り、以前は同じ問題がありました。私は入力で "disabled"の代わりに "readonly"を使って修正しました。

<input name="giftAddress" required [readonly]="!isAddressEditable"> // false (disabled) by default 

上記の提案をお試しいただけますか？