Angular2 forms 单击单选按钮时,角度4日期字段设置为空

Angular2 forms 单击单选按钮时,角度4日期字段设置为空,angular2-forms,Angular2 Forms,因此,我设法通过更新包来解决最初的问题,但下面是一个深色背景和深色字体 下面是视图的代码 <div *ngSwitchCase="'Basic'"> <md-card> <md-card-content> <h4>Basic Institution Subscription Page</h4>

因此,我设法通过更新包来解决最初的问题,但下面是一个深色背景和深色字体

下面是视图的代码

 <div *ngSwitchCase="'Basic'">
                    <md-card>
                        <md-card-content>
                            <h4>Basic Institution Subscription Page</h4>
                                <div class="row">
                                    <div class="panel panel-default">
                                        <div class="panel-heading">Your School or Institution Profile</div>
                                        <div class="panel-body">
                                            <md-card>
                                                <md-card-content>
                                                    <div class="row" style="padding-left:10px;padding-bottom:10px;padding-top:20px">
                                                        <div class="col-md-6">
                                                            <img md-card-md-image [src]="'data:image/jpg;base64,' + institution.Crest" class="crest_image" style="margin-bottom:5px;margin-left:10px" />
                                                            <h6>Select Institution Crest</h6>
                                                            <input #crest type="file" (change)="crestChangeListner($event)" style="margin-left:20px" />
                                                        </div>
                                                        <div class="col-md-6">
                                                            <img md-card-md-image [src]="'data:image/jpg;base64,' + institution.BackGroundPicture" class="bgpic_image" style="margin-bottom:5px;margin-left:10px" />
                                                            <h6 *ngIf="!institution.BackGroundPicture">Select Background Image</h6>
                                                            <input #bgpic type="file" (change)="bgpicChangeListner($event)" style="margin-left:20px" />
                                                        </div>
                                                    </div>
                                                    <div class="row">

                                                        <div class="col-md-6">
                                                            <md-radio-group [(ngModel)]="institution.OwnershipCategory"
                                                                            (change)="OwnershipCategorySelected($event.value)" name="ownershipCategory" class="example-margin"
                                                                            [value]="institution.OwnershipCategory"
                                                                            [align]="isAlignEnd ? 'end' : 'start'">
                                                                <md-radio-button class="icon-align-vertical" name="ownershipCategory" value="Public">
                                                                    Public
                                                                </md-radio-button>
                                                                <md-radio-button class="icon-align-vertical" name="ownershipCategory" value="Private">
                                                                    Private
                                                                </md-radio-button>
                                                            </md-radio-group>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <md-select placeholder="Select Country" style="width: 100%"
                                                                       id="countryID" name="countryID" class="required"
                                                                       [(ngModel)]="institution.Country"
                                                                       (ngModelChange)="countrySelected()">
                                                                <md-option *ngFor="let country of countries" [value]="country.CountryID">
                                                                    {{ country.CountryName }}
                                                                </md-option>
                                                            </md-select>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <md-select placeholder="Select Office" style="width: 100%"
                                                                       id="officeID" name="officeID" class="required"
                                                                       [(ngModel)]="institution.OfficeID"
                                                                       (ngModelChange)="officeSelected()">
                                                                <md-option *ngFor="let office of offices" [value]="office.AdministrativeStructureID">
                                                                    {{ office.AdminStructName }}
                                                                </md-option>
                                                            </md-select>
                                                        </div>
                                                    </div>
                                                    <div class="row" *ngIf="offices">

                                                    </div>
                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <md-input-container style="width:100%">
                                                                <input mdInput name="InstitutionID" placeholder="Enter Institution ID"
                                                                       [(ngModel)]="institution.InstitutionID" required id="InstitutionID" style="width: 100%"
                                                                       #InstitutionID="ngModel">
                                                                <div [hidden]="InstitutionID.valid || InstitutionID.pristine"
                                                                     class="alert alert-danger">
                                                                    Institution ID  is required
                                                                </div>
                                                            </md-input-container>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <md-input-container style="width:100%">
                                                                <input mdInput placeholder="Enter Institution Name"
                                                                       [(ngModel)]="institution.InstitutionName" name="InstitutionName" id="InstitutionName" required style="width: 100%"
                                                                       #InstitutionName="ngModel">
                                                                <div [hidden]="InstitutionName.valid || InstitutionName.pristine"
                                                                     class="alert alert-danger">
                                                                    Institution Name is required
                                                                </div>
                                                            </md-input-container>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <md-input-container style="width:100%">
                                                                <input mdInput name="Website" placeholder="Enter Website Address"
                                                                       [(ngModel)]="institution.Website" required id="Website" style="width: 100%"
                                                                       #Website="ngModel">
                                                                <div [hidden]="Website.valid || Website.pristine"
                                                                     class="alert alert-danger">
                                                                    Website  is required
                                                                </div>
                                                            </md-input-container>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <md-input-container style="width:100%">
                                                                <input mdInput placeholder="Enter Email Address"
                                                                       [(ngModel)]="institution.EmailAddress" name="EmailAddress" id="EmailAddress" required style="width: 100%"
                                                                       #EmailAddress="ngModel">
                                                                <div [hidden]="EmailAddress.valid || EmailAddress.pristine"
                                                                     class="alert alert-danger">
                                                                    Email Address is required
                                                                </div>
                                                            </md-input-container>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <md-input-container style="width:100%">
                                                                <input mdInput name="PostalAddress" placeholder="Enter Postal Address"
                                                                       [(ngModel)]="institution.PostalAddress" required id="PostalAddress" style="width: 100%"
                                                                       #PostalAddress="ngModel">
                                                                <div [hidden]="PostalAddress.valid || PostalAddress.pristine"
                                                                     class="alert alert-danger">
                                                                    Postal Address  is required
                                                                </div>
                                                            </md-input-container>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <md-input-container style="width:100%">
                                                                <input mdInput placeholder="Enter Residential Address"
                                                                       [(ngModel)]="institution.ResidentialAddress" name="ResidentialAddress" id="ResidentialAddress" required style="width: 100%"
                                                                       #ResidentialAddress="ngModel">
                                                                <div [hidden]="ResidentialAddress.valid || ResidentialAddress.pristine"
                                                                     class="alert alert-danger">
                                                                    Residential Address is required
                                                                </div>
                                                            </md-input-container>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <md-input-container style="width:100%">
                                                                <input mdInput name="Phone1" placeholder="Enter Phone1"
                                                                       [(ngModel)]="institution.Phone1" required id="Phone #1" style="width: 100%"
                                                                       #Phone1="ngModel">
                                                                <div [hidden]="Phone1.valid || Phone1.pristine"
                                                                     class="alert alert-danger">
                                                                    Phone1  is required
                                                                </div>
                                                            </md-input-container>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <md-input-container style="width:100%">
                                                                <input mdInput placeholder="Enter Phone2"
                                                                       [(ngModel)]="institution.Phone2" name="Phone2" id="Phone #2" required style="width: 100%"
                                                                       #Phone2="ngModel">
                                                                <div [hidden]="Phone2.valid || Phone2.pristine"
                                                                     class="alert alert-danger">
                                                                    Phone2 is required
                                                                </div>
                                                            </md-input-container>
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-md-6">

                                                           <md2-datepicker 
                                                                           style="width:100%" 
                                                                           class="md-input-element" 
                                                                           placeholder="Select Date Founded"
                                                                           name="DateFounded"
                                                                           (ngModel)="institution.DateFounded"
                                                                           [required]="isRequired"
                                                                           [disabled]="isDisabled"
                                                                           [openOnFocus]="isOpenOnFocus"
                                                                           [isOpen]="isOpen"
                                                                           [type]="type"
                                                                           [min]="minDate"
                                                                           [max]="maxDate">
                                                           </md2-datepicker>

                                                        </div>
                                                        <div class="col-md-6">
                                                            <div class="row">
                                                                <div class="col-md-4"><h6>Select Institution Catgory</h6></div>
                                                                <div class="col-md-8">
                                                                    <md-radio-group [(ngModel)]="institution.SchoolCategory"
                                                                                    (change)="SchoolCategorySelected($event.value)" name="schoolCategory" class="example-margin"
                                                                                    [value]="institution.SchoolCategory"
                                                                                    [align]="isAlignEnd ? 'end' : 'start'">
                                                                        <md-radio-button class="icon-align-vertical" name="schoolCategory" value="A">
                                                                            A
                                                                        </md-radio-button>
                                                                        <md-radio-button class="icon-align-vertical" name="schoolCategory" value="B">
                                                                            B
                                                                        </md-radio-button>
                                                                        <md-radio-button class="icon-align-vertical" name="schoolCategory" value="C">
                                                                            C
                                                                        </md-radio-button>
                                                                        <md-radio-button class="icon-align-vertical" name="schoolCategory" value="D">
                                                                            D
                                                                        </md-radio-button>
                                                                        <md-radio-button class="icon-align-vertical" name="schoolCategory" value="E">
                                                                            E
                                                                        </md-radio-button>
                                                                        <md-radio-button class="icon-align-vertical" name="schoolCategory" value="F">
                                                                            F
                                                                        </md-radio-button>
                                                                    </md-radio-group>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </md-card-content>
                                            </md-card>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="panel panel-default">
                                                <div class="panel-heading">Shool Ownership In formation</div>
                                                <div class="panel-body">
                                                    <md-card>
                                                        <md-card-content>
                                                            <div class="row">
                                                                <md-select placeholder="Select Owner Type" style="width: 100%"
                                                                           id="ownershipTye" name="ownershipType" class="required"
                                                                           [(ngModel)]="ownershipType"
                                                                           (ngModelChange)="ownershipTypeSelected()">
                                                                    <md-option *ngFor="let option of ownershipTypes" [value]="option">
                                                                        {{ option }}
                                                                    </md-option>
                                                                </md-select>
                                                            </div>
                                                            <div class="row">
                                                                <md-input-container style="width:100%">
                                                                    <input mdInput name="fullName" placeholder="Enter Full Name"
                                                                           [(ngModel)]="ownership.FullName" required id="fullName" style="width: 100%"
                                                                           #fullName="ngModel">
                                                                    <div [hidden]="fullName.valid || fullName.pristine"
                                                                         class="alert alert-danger">
                                                                        fullName  is required
                                                                    </div>
                                                                </md-input-container>
                                                            </div>
                                                            <div class="row">
                                                                <ul class="list-group">
                                                                    <li class="list-group-item" *ngFor="let owner of ownerships">
                                                                        <span class="badge">{{owner.FullName}}</span>
                                                                        <md-checkbox name="ownerName"
                                                                                     (change)="fullNameSelected(owner)"
                                                                                     [(ngModel)]="owner.Selected">
                                                                            {{owner.OwnershipTye}}
                                                                        </md-checkbox>
                                                                    </li>

                                                                </ul>
                                                            </div>

                                                        </md-card-content>
                                                    </md-card>
                                                </div>
                                                <div class="panel-footer">
                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <button md-raised-button color="primary" type="button" (click)="AddOwner()">Add Owner</button>
                                                        </div>
                                                        <div class="col-md-6">
                                                            <span class="pull-right">
                                                                <button md-raised-button color="primary" type="button" (click)="removeOwner()">Remove Owner</button>
                                                            </span>

                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>           
                        </md-card-content>
                    </md-card>
                </div>

基本机构订阅页
你的学校或机构简介
选择院校徽章
选择背景图像
公开的
私有的
{{country.CountryName}
{{office.AdminStructName}
需要机构ID
机构名称为必填项
网站是必需的
电子邮件地址是必需的
邮政地址是必需的
isRequired = false;
isDisabled = false;
isOpenOnFocus = false;
isOpen = false;
type: string = 'date';
types: Array<any> = [
    { text: 'Date', value: 'date' },
    { text: 'Time', value: 'time' },
    { text: 'Date Time', value: 'datetime' }];

openDatepicker() {
    this.isOpen = true;
    setTimeout(() => {
        this.isOpen = false;
    }, 1000);
}

//startDate: Date = null;
setDate() {
    this.institution.DateFounded = new Date();
}

minDate: Date = null;
maxDate: Date = null;

setDateRange() {
    this.minDate = new Date();
    this.minDate.setMonth(this.minDate.getMonth() - 3);
    this.maxDate = new Date();
    this.maxDate.setMonth(this.maxDate.getMonth() + 3);
}