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 { 身份证号码， 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>

将其添加到您的组件中。

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。很好我会用它。

在Angular 4中显示选定的下拉列表项

1 个答案: