Angular 2 Form - отключить submit, когда ngModel = empty obj

Question

У меня есть форма Angular2, которая создается динамически с циклом for. По этому вопросу меня интересуют радиокнопки в моей форме. Форма создается в 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 для радиовхода установлено = {}.

Как я могу держать эту же установку (потому что она укоренилась глубоко в мой компонент интерфейса и серверной), но делают вид недействительным, когда ngModel = {}

Answer 1

Два способа, вызовите функцию, чтобы проверить, если значение пустой (потенциально дорого, наверное, усложненной):

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

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

в stringify и разобрать вместе вырезать любые неопределенные ключи (идти вперед, console.log(formValue) и смотреть на эти неопределенные ключи!)

Или вы можете проверить форму для dirty, который указывает:

загрязнен: булево Контрольную загрязнен, если пользователь изменил значение в пользовательском интерфейсе.

Обратите внимание, что программные изменения значения элемента управления не маркируют его грязный.

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

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

Plunker демо: http://plnkr.co/edit/14yQk2QKgBFGLMBJYFgf?p=preview