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

Я создал реактивную форму Angular, в которой метки нужно переключать через разрешения. Я хочу справиться с этим семантическим переключением через компоненты, создав компонент, который будет отвечать за прием данных как @Input () и рендеринг этих конкретных тегов ввода. Как правильно с этим справиться?

Существует родительский master-form.component, который состоит из with 'formGroup' и подкомпонента с именем input-switch.component. Я передал определенные параметры в подкомпонент через @Input (). Подкомпонент состоит из значения поля и formControlName, переключаемого с помощью ngIf.

Вот HTML-код master-form.component -

<form class="master-form" [formGroup]="masterForm" (ngSubmit)="submitData(masterForm)">
    <label>My first field: </label>
    <input-switch [setting]="'change'" [labelVal]="'first field value'" [formCtrl]="'firstField'">
    </input-switch>
    <label>My second field: </label>
    <input-switch [setting]="'change'" [labelVal]="'second field value'" 
[formCtrl]="'secondField'">
    </input-switch>
    <button type="submit" [disabled]="!masterForm.valid"></button>
</form>

Класс компонента мастер-формы -

class MasterFormComponent implements OnInit {
    masterForm: FormGroup;

    constructor(private fb: FormBuilder){}

    ngOnInit() {
        this.masterForm = this.fb.group({
          firstField: ['', Validators.maxLength(10)],
          secondField: ['', Validators.maxLength(20)]
        });
    }

    submitData(form) {
        console.log('DONE!');
    }
}

Класс подкомпонента входного переключателя -

class InputSwitch {
    @Input() setting ;
    @Input() labelVal;
    @Input() formCtrl;
}

Подкомпонент переключателя ввода html -

<span *ngIf="setting !== 'change'">{{labelVal}}</span>
<input *ngIf="setting === 'change'" [formControlName]="formCtrl" />

Возникает ошибка с упоминанием отсутствующей 'formGroup' в input-switch.component, и я не могу установить форму. В чем, кажется, проблема? Есть ли другой способ добиться этой функциональности?


typescript javascript angular angular-reactive-forms reactive-forms
person devdeb1011011    schedule 26.08.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

Вложенные реактивные формы с использованием элементов ControlValueAccessors

Это сложно, но вы можете попробовать.

Также вы можете создать два отдельных компонента, каждый из которых имеет разные элементы формы, и переключать их с помощью * ngIf. Нарушение его в компоненте / директиве потребует вставки в каждое поле формы. Привязка модели должна обрабатываться правильно, имея в виду, что ngModel присутствует в родительском контроллере. При неправильной обработке это может увеличить сложность кода.

В зависимости от ваших требований выберите способ продолжения.

person alyson_216    schedule 27.08.2019