вызвано: Не удается прочитать свойство «firstname» undefined

Question

Я создал компонент и html-файл. В компоненте I определены одна модель и значения со списком. В 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 из 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" в форме, так что следующая линия будет работать:

<small *ngIf="!firstname.valid">Not valid!</small>