2

for ループで動的に作成される Angular2 フォームがあります。この質問では、フォームのラジオ ボタンに関心があります。フォームは HTML で作成され、TS から各入力の ngModel を空のオブジェクトに割り当てます。ラジオボタンが選択されるまで、フォームの送信ボタンを無効にしたい:

<form (ngSubmit)="onNext(f)" #f="ngForm">

<div class="multi-choice-question-div radio-btn-div question_div" 
    *ngIf="question?.type === 'multi-choice' && !question?.isYesOrNo">
    <div *ngFor="let answer of question?.answerDetails">
        <input
            type="radio" 
            class="display-none" 
            id="{{ answer?.answerId }}"
            [(ngModel)]="ngModelObj['question_' + question.questionId]"
            name="answerForQustion{{ question?.questionId }}"
            [value]="answer"
            required>
        <label class="col-md-12 col-sm-12 multi-choice-label" for="{{ answer?.answerId }}">
            <p class="q-text">{{ answer?.value }}</p>
        </label>
    </div>
</div>

<button class="btn btn-next"
    type="submit"
    *ngIf="currentSectionIndex < sectionsArr.length - 1"
    [disabled]="!f.valid">
        NEXT
</button>

</form>

クライアントがラジオボタンを選択していない場合でも、フォームはそれが有効であると考えています。これはngModel、ラジオ入力が = to に設定されているためだと思います{}。

この同じ設定を維持するにはどうすればよいですか (コンポーネントのフロントエンドとバックエンドに深く根付いているため)、ngModel=の場合にフォームを無効にするにはどうすればよいですか?{}

4

1 に答える 1

1

2 つの方法として、関数を呼び出して値が空かどうかを確認します (潜在的に高価で、おそらく複雑すぎる)。

[disabled]="f.invalid || isEmpty(f.value)"

isEmpty(formValue) {
  let x = JSON.parse(JSON.stringify(formValue));
  return Object.getOwnPropertyNames(x).length === 0;
}

stringify と parse を一緒に実行すると、未定義のキーが取り除かれます (console.log(formValue)これらの未定義のキーを見てください!)

dirtyまたは、次を示すフォームを確認できます。

dirty : boolean ユーザーがUIで値を変更した場合、コントロールはダーティです。

コントロールの値をプログラムで変更しても、ダーティとマークされないことに注意してください。

[disabled]="!f.valid || !f.dirty"

https://angular.io/docs/ts/latest/api/forms/index/AbstractControl-class.html#!#dirty-anchor

プランカーのデモ: http://plnkr.co/edit/14yQk2QKgBFGLMBJYFgf?p=preview

于 2016-12-12T19:56:30.527 に答える