Показать выбранный элемент раскрывающегося списка в угловых 4

Question

Я поражен ситуацией, когда мне приходится отображать нижеприведенные 4 подробности подряд (повторяется) 1. Название страны (выпадающий список) 2. Формат даты (только для чтения) 3. Мобильный формат (только для чтения) 4Формат UniqueID (только для чтения)

Предположим, что существует 10 стран, и пользователь выбрал 3 страны, после чего должны отображаться 3 строки.Однако поле CountryName представляет собой раскрывающийся список, в котором содержится список всех 10 стран.Когда он меняет страну из выпадающего списка, другие свойства должны быть изменены.

Я должен показывать свойства только для чтения из данных модели, но, к сожалению, я не могу связать выбранное название страны со строками.

Ниже приведен фрагмент кода

            <div class="col-md-9 activationSelect">
                <div class="row" *ngFor="let country of countryList">
                    <div class="col-md-3">
                        <mat-form-field>
                            <mat-select formControlName="CountryName">
                                <mat-option value="{{country.id}}" selected>
                                    {{country.countryName}}
                                </mat-option>                
                            </mat-select>
                        </mat-form-field>
                    </div>

                    <div class="col-md-3 mt7">
                        <mat-form-field>
                          <input matInput formControlName="DateFormat" value="{{country.dateFormat}}" readonly >                                
                        </mat-form-field>
                    </div>

                    <div class="col-md-3 mt7">
                        <mat-form-field>
                          <input matInput formControlName="MobileFormat" value="{{country.mobileFormat}}" readonly>                                
                        </mat-form-field>
                    </div>

                    <div class="col-md-3 mt7">
                        <mat-form-field>
                          <input matInput formControlName="UniqueIdType" value="{{country.uniqueIdType}}" readonly>                                
                        </mat-form-field>
                    </div>

                </div>

                <div class="row">
                    <div class="col-md-3 mt15">
                        <label (click)="addCountry()" class="cursor-pointer font-capitalize text-rose font500 font12">+ Add Country</label>
                    </div>
                </div>

интерфейс экспорта ICountry {id: номер, countryName: строка, dateFormat: строка, mobileFormat: строка, uniqueIdType: строка, uniqueIdFormat: строка, countryCode: строка}

Answer 1

Используйте ngForm.Импортируйте его свой component.module.ts (файл модуля)

import { FormsModule } from '@angular/forms';

Добавьте его в свой шаблон компонента

<form role="form" (ngSubmit)="f.form.valid && onSubmit()" #f="ngForm" novalidate>
    <select name="name_id" [(ngModel)]="model.name_id" #name_id="ngModel" [ngClass]="{ 'is-invalid': f.submitted && name_id.invalid }" required>
        <option value="" disabled selected>Select Name</option>
        <option *ngFor="let name of allnames" [value]="name.name_id">{{name.name}}</option>
    </select>
    <div *ngIf="f.submitted && name_id.invalid" class="invalid-feedback">
        <div *ngIf="name_id.errors.required">Name is required</div>
    </div>
    <button type="submit">save</button>
</form>

Добавьте его в свой component.ts

allnames = [{
    name_id: 1,
    name: 'Jhon'
}, {
    name_id: 2,
    name: 'Chena'
}, {
    name_id: 3,
    name: 'Jack'
}]
model: any = {};
ngOnInit() {
    this.model.name_id = 2;
}

Имя Chena выбрано.Это хорошо работает.И я буду его использовать.