Блог

Надеюсь, я смогу получить некоторую помощь в отладке этого приложения. Проблема в том, что кнопка «Отправить», по-видимому, не синхронизирована с моделью представления.

Например, у меня есть форма с элементом управления select, который является обязательным полем. Параметры выбора создаются динамически с помощью службы API, поэтому при загрузке формы выбор уже имеет предварительно выбранный набор параметров и должен быть действительным.

Однако кнопка «Отправить» отключена! единственный способ включить кнопку «Отправить» — это просто нажать на форму и вручную установить выбранную опцию (даже если это та же опция, которая была установлена при загрузке формы). Это взаимодействие приводит к включению отправки.

При проверке загруженной HTML-формы форма имеет ng-допустимые стили и не отображается ng-недопустимый.

Что может привести к тому, что кнопка не будет синхронизирована с представлением и сообщенным допустимым состоянием элемента управления и родительской формы?

Переходите к Реактивным Формам. Будет легче исправить.

 Template.html
    <form [formGroup]="formName">
        <mat-form-field>
            <mat-label>LABEL</mat-label>
            <input matInput formControlName="controlName"/>
        </mat-form-field>
    </form>
    
    ...
       <button mat-raised-button color="primary" (click)="onSubmit()"
           [disabled]="fChildComponent?.invalid || f.invalid">SUBMIT</button>
   
 

компонент.ts

 @ViewChild(ChildComponent) child: ChildComponent;

get f(): FormGroup { return this.form; }
get fChildComponent(): FormGroup { return this.child.fchildForm }
 

Тогда вы можете указать недопустимое состояние ребенка.
Или вы можете работать над пользовательским ControlValueAccessor, NG_VALUE_ACCESSOR and NG_VALIDATORS