Форма не отображается с пустыми полями формы как часть процесса Create Crud в приложении Angular 7 -- angular пол Связанный проблема

Form not displaying with empty form fields as part of the create CRUD process in Angular 7 application


0
vote

проблема

русский

Я создаю создание PhancialAttify, которая является частью операции CRUD для одной из моих модели в угловой 7 приложения. Я использую формы ведомых шаблонов. Как видите, у меня временно установите REMENTID на 0, чтобы начать создание. Как вы также можете увидеть в моем HTML, я только отображаю содержимое, если менеджеры не нулевые. На данный момент я получаю пустую форму. Как я показываю пустые поля на экране.

 <код> import { Component, Injectable, NgZone, ViewEncapsulation, ViewChild } from '@angular/core'; import { OnInit, Input } from '@angular/core'; import { ManagerService } from '../services/manager.service'; import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic'; import { CommonDataService } from '../services/common.data.service'; import { IManager } from './manager.interface';  @Component({     selector: 'mgr-manager',     templateUrl: './manager.component.html' })   export class ManagerComponent implements OnInit {      private Error: string;     public ManagerDetails: any;     public EditMode: boolean;     public Editor = ClassicEditor;     public EditorConfig: string;     @Input() ManagerId: number;      constructor(private managerService: ManagerService, private commonDataService: CommonDataService) {      }      ngOnInit() {         this.ManagerId = 0;         if (this.ManagerId !== 0 ) {             this.getManagerDetails();         } else {           }     }      getManagerDetails() {         if (this.ManagerId != null) {             this.managerService.getManagerDetails(this.ManagerId).subscribe((data: IManager[]) => {                 this.ManagerDetails = data;             });         }     }      saveManager() {          if (this.ManagerDetails.ManagerId === 0) {             this.managerService.createManager(this.ManagerDetails).then((result ) => {                 if (result) {                     this.getManagerDetails();                     this.EditMode = !this.EditMode;                 }             });          } else {             this.managerService.updateManager(this.ManagerDetails).then((result) => {                 if (result) {                     this.getManagerDetails();                     this.EditMode = !this.EditMode;                 }             });         }      }  }   

html

 <код> <div class="card">     <div class="card-header panel-heading">         <span style="font-size: 18px; font-weight: bold; ">Manager Details</span>         <div class="pull-right" style="padding-right:10px;">             <label class="btn btn-primary" [ngClass]="{'btn-primary': EditMode, 'btn-default': !EditMode }"><input                     type="checkbox" [(ngModel)]="EditMode" class="hidden">Edit Mode</label>          </div>     </div>     <div class="card-body">         <div *ngIf="ManagerDetails" class="card-body scrollClass" style="width:100%">              <div class="form-group row">                 <label for="inputName" class="col-sm-2 col-form-label modal-label header">First Name</label>                 <div class="col-sm-9">                     <div *ngIf="!EditMode">{{ManagerDetails.FirstName}}</div>                     <input *ngIf="EditMode" kendoTextBox [readonly]="false" class="form-control"                         [(ngModel)]="ManagerDetails.FirstName" />                 </div>               </div>              <div class="form-group row">                 <label for="inputName" class="col-sm-2 col-form-label modal-label header">Last Name</label>                 <div class="col-sm-9">                     <div *ngIf="!EditMode">{{ManagerDetails.LastName}}</div>                     <input *ngIf="EditMode" kendoTextBox [readonly]="false" class="form-control"                         [(ngModel)]="ManagerDetails.LastName" />                 </div>               </div>            </div>         <div class="btn-toolbar" style="padding-top:40px;">              <span *ngIf="EditMode"><button type="button" class="btn btn-primary btn-view-all btn mr-3"                     (click)="saveManager()">Save</button>              </span>             <span><button type="button" class="btn btn-primary btn-view-all btn mr-3"                     (click)="cancelManager">Cancel</button>             </span>             <span><button type="button" style="float: right;" class="btn btn-primary btn-view-all"                     (click)="deleteManager()">Delete</button>             </span>         </div>     </div> </div>   
Английский оригинал

I am creating create functionaltiy which is part of CRUD operation for one of my model in angular 7 application. I am using template driven forms. As you can see I have temporarily set the ManagerId to 0 to initiate the Create. As you can also see in my html , I am only displaying the contents if the ManagerDetails is not null. At the moment I am getting blank form. How I show blank fields on the screen.

import { Component, Injectable, NgZone, ViewEncapsulation, ViewChild } from '@angular/core'; import { OnInit, Input } from '@angular/core'; import { ManagerService } from '../services/manager.service'; import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic'; import { CommonDataService } from '../services/common.data.service'; import { IManager } from './manager.interface';  @Component({     selector: 'mgr-manager',     templateUrl: './manager.component.html' })   export class ManagerComponent implements OnInit {      private Error: string;     public ManagerDetails: any;     public EditMode: boolean;     public Editor = ClassicEditor;     public EditorConfig: string;     @Input() ManagerId: number;      constructor(private managerService: ManagerService, private commonDataService: CommonDataService) {      }      ngOnInit() {         this.ManagerId = 0;         if (this.ManagerId !== 0 ) {             this.getManagerDetails();         } else {           }     }      getManagerDetails() {         if (this.ManagerId != null) {             this.managerService.getManagerDetails(this.ManagerId).subscribe((data: IManager[]) => {                 this.ManagerDetails = data;             });         }     }      saveManager() {          if (this.ManagerDetails.ManagerId === 0) {             this.managerService.createManager(this.ManagerDetails).then((result ) => {                 if (result) {                     this.getManagerDetails();                     this.EditMode = !this.EditMode;                 }             });          } else {             this.managerService.updateManager(this.ManagerDetails).then((result) => {                 if (result) {                     this.getManagerDetails();                     this.EditMode = !this.EditMode;                 }             });         }      }  } 

html

<div class="card">     <div class="card-header panel-heading">         <span style="font-size: 18px; font-weight: bold; ">Manager Details</span>         <div class="pull-right" style="padding-right:10px;">             <label class="btn btn-primary" [ngClass]="{'btn-primary': EditMode, 'btn-default': !EditMode }"><input                     type="checkbox" [(ngModel)]="EditMode" class="hidden">Edit Mode</label>          </div>     </div>     <div class="card-body">         <div *ngIf="ManagerDetails" class="card-body scrollClass" style="width:100%">              <div class="form-group row">                 <label for="inputName" class="col-sm-2 col-form-label modal-label header">First Name</label>                 <div class="col-sm-9">                     <div *ngIf="!EditMode">{{ManagerDetails.FirstName}}</div>                     <input *ngIf="EditMode" kendoTextBox [readonly]="false" class="form-control"                         [(ngModel)]="ManagerDetails.FirstName" />                 </div>               </div>              <div class="form-group row">                 <label for="inputName" class="col-sm-2 col-form-label modal-label header">Last Name</label>                 <div class="col-sm-9">                     <div *ngIf="!EditMode">{{ManagerDetails.LastName}}</div>                     <input *ngIf="EditMode" kendoTextBox [readonly]="false" class="form-control"                         [(ngModel)]="ManagerDetails.LastName" />                 </div>               </div>            </div>         <div class="btn-toolbar" style="padding-top:40px;">              <span *ngIf="EditMode"><button type="button" class="btn btn-primary btn-view-all btn mr-3"                     (click)="saveManager()">Save</button>              </span>             <span><button type="button" class="btn btn-primary btn-view-all btn mr-3"                     (click)="cancelManager">Cancel</button>             </span>             <span><button type="button" style="float: right;" class="btn btn-primary btn-view-all"                     (click)="deleteManager()">Delete</button>             </span>         </div>     </div> </div> 
</div
  
 
 

Список ответов

Связанный проблема

0  Как я могу вернуть перемен на запрос на поставку при использовании Async и ждут угловой?  ( How do i return the resonse from a put request when using async and await in ang ) 
У меня есть функция, которая инициирует HTTP-запрос. Этот запрос возвращает ответ, который я хотел бы вернуться и получить доступ в другой функции как сравнен...

4  Угловой материал CDK наложение прокрутки блока прокрутки не работает при навигационной панели  ( Angular material cdk overlay scroll block not working when in nav sidebar ) 
Я добавляю наложение CDK к Mat-Sidenav. Я хотел бы заблокировать прокрутку на Mat-SidenaV, когда наложение открыто. Я создаю наложение с заблокированным про...

0  Angular 7 Получить изображения из Firebase  ( Angular 7 get images from firebase ) 
Попытка получить изображение от firestorage, как я могу добавить абсолютный путь перед <код> new Date("04-02-2008")7 или как я могу проверить путь и встроить...

8  Отладка His Visual Studio Code Chrome, точка останова не ударит  ( Visual studio code debugging chrome breakpoints wont hit ) 
У меня есть приложение Angular2 / Tymdercript, которое я работаю в VSCode. Я использую Thelp, чтобы построить файлы Tearpcript и Gulp-SourceMap для создания ф...

1  Угловая 2 автоматическая заполнение  ( Angular 2 automatic fill in ) 
Угловая 2 форма с тремя иерархическими полями, которые, большую часть времени, должны иметь одинаковые значения, но иногда нет. Чтобы ускорить запись данных, ...

1  Переместить угловые компоненты в WordPress  ( Move angular components to wordpress ) 
Я пытаюсь переместить мою угловое приложение в WordPress. Для этого мне не нужны все компоненты, потому что некоторые вещи сделаны с WordPress. Но мне нужно и...

0  Метод угловых GetCookie от так не работает больше  ( Angular getcookie method from so does not work anymore ) 
У меня есть следующий код от так: <код> import { Injectable } from '@angular/core'; @Injectable() export class CookieService { constructor() { } pub...

3  Листовка Divicon не отображается на карте в угловом  ( Leaflet divicon not displaying on map in angular ) 
Я пытаюсь добавить маркер дивикона в угловой листовки. Component.csss: <код> .leaflet-div-icon2 { background: #e5001a; border:5px solid rgba(255,2...

0  Как манипулировать RouterLink при использовании App-Sidebar-Nav в Coreui?  ( How to manipulate routerlink when using app sidebar nav in coreui ) 
Я использую app-sidebar-nav (ссылка здесь ) для перенаправления на различные части моего приложения. Однако дочерний маршрут добавляется к текущему URL-адр...

2  Сообщение об ошибке в режиме отладки Monaca с Ansen UI угловой 2  ( Error message in monaca debug mode with onsen ui angular 2 ) 
У меня есть ошибки шаблона разбора в отладчике Monaca. При использовании monaca preview он работает в браузере без каких-либо проблем, но когда я использую ...

1  Как использовать NG2 Bootstrap Typeaple Value от модели, а не из всплывающего окна?  ( How to use ng2 bootstrap typeahead value from model and not the one from popup ) 
NG2-Bootstrap Typeapehead предлагает: <код> [typeaheadOptionField]="'view'" использовать из JSON, как <код> {id: 1, name: 'Alabama', view:'State: Alab...

46  Angular 2 Azure Развертывание Ошибка обновления: ресурс, который вы ищете, был удален, было изменено его имя или временно недоступно  ( Angular 2 azure deploy refresh error the resource you are looking for has been ) 
У меня есть приложение Angular 2 RC-2 с применением базовой маршрутизации. Пути <код> empty-string5 Какой путь по умолчанию и <код> empty-string6 empty-stri...

0  NGINX обслуживает старые статические файлы при доступе к HTTPS  ( Nginx serves old static files when accessing via https ) 
У меня есть проблема с AWS Lights Server Server, имеет Nginx, который обслуживает статические угловые файлы. Конфигурация: <код> server { listen 8080; ...

0  Redux и 3-й партийные библиотеки  ( Redux and the 3rd party libraries ) 
Мы строим админ-панель, и мы взяли NGX-admin в качестве основы. Я хочу использовать @ NGXS / Store в проекте. Но панель администратора получила 3-я сторонни...

-3  Нужно решение с NGFOR  ( Need solution with ngfor ) 
<код> //appcomponent.ts import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: [...

Связанный проблема

0  Как я могу вернуть перемен на запрос на поставку при использовании Async и ждут угловой? 
4  Угловой материал CDK наложение прокрутки блока прокрутки не работает при навигационной панели 
0  Angular 7 Получить изображения из Firebase 
8  Отладка His Visual Studio Code Chrome, точка останова не ударит 
1  Угловая 2 автоматическая заполнение 
1  Переместить угловые компоненты в WordPress 
0  Метод угловых GetCookie от так не работает больше 
3  Листовка Divicon не отображается на карте в угловом 
0  Как манипулировать RouterLink при использовании App-Sidebar-Nav в Coreui? 
2  Сообщение об ошибке в режиме отладки Monaca с Ansen UI угловой 2 
1  Как использовать NG2 Bootstrap Typeaple Value от модели, а не из всплывающего окна? 
46  Angular 2 Azure Развертывание Ошибка обновления: ресурс, который вы ищете, был удален, было изменено его имя или временно недоступно 
0  NGINX обслуживает старые статические файлы при доступе к HTTPS 
0  Redux и 3-й партийные библиотеки 
-3  Нужно решение с NGFOR