Question

我创建了组件和html文件。在组件中，我定义了一个模型和组合框值。在html文件中，我试图将这些模型值绑定到文本框和组合框。当我运行时，应用程序控件显示正确，但在组合框中没有任何值，模型显示未定义。请验证以下代码。

component.ts：

export class Testpagesearchcomponent implements OnInit {

    model: any = {};
    search_Master_cmbtest = {
        ValidValues: [
            { display: '1', value: 'a' },
            { display: '2', value: 'b' }
        ],
        DefaultValue: { display: '1', value: 'a' }
    };

    constructor(
        private route: ActivatedRoute,
        private router: Router,
        private patientService: TestpageService
    ) { }

    ngOnInit() {
        this.initModel();
    }

    private initModel() {
        this.model = {
            firstname: "avc",             
            cmbtest: null
        };
    }       
}

Html文件：

<div class="col-sm-4" [ngClass]="{ 'has-error': formsearch.firstname.$invalid }">
    <input type="text"
         class="form-control text-left"
         name="firstname"
         maxlength="50"
         [(ngModel)]="model.firstname" />
</div>
<div class="col-sm-4"> 
    <select name="cmbtest"
         class="form-control" [(ngModel)]="model.cmbtest">
        <option *ngFor="let option of search_Master_cmbtest.ValidValues" [ngValue]="option">{{option.display}}</option>
    </select>
</div>

Answer 1

导致错误的行是：

<div class="col-sm-4" [ngClass]="{ 'has-error': formsearch.firstname.$invalid }">

它无法读取firstname的{{1}}，这就是错误指向的情况，而不是您的模型。

如果这不是一个表格，你应该删除它，你们都很高兴！：）

如果这确实是一个表单，您需要查看您的验证。如果您想验证formsearch，我建议你这样做：

firstname

您应该注意以下几行：

<form #formsearch="ngForm">
    <input type="text"
       name="firstname"
       maxlength="50" #firstname ngModel
       [(ngModel)]="model.firstname" required />
       <small *ngIf="!firstname.valid">Not valid!</small>
    <!-- rest of your form -->
</form>

通过上面的描述，我们在表单中绑定#firstname ngModel，以便以下行可以工作：

name="firstname"

引起：无法阅读财产＆＃39;名字＆＃39;未定义的

1 个答案: