Angular:在Cloud Firestore中保存数据

时间:2018-09-19 06:51:35

标签: angular firebase google-cloud-firestore

我是新来的有角度的人,正在做一个表格。我将一个字段设置为带有值的只读字段,但是在发布表单时,我希望该只读值也提交到数据库中。 我正在使用Cloud Firestore作为数据库。因此,我将为您提供帮助。

我做了一些修改,但对我没有用,所以我现在需要做些什么。

这里,我的表格是

 <form (ngSubmit)="addWorkshop()" #workshopForm="ngForm" role="form" class="padding-left">
                                <label>
                                    <h3>Add Workshop</h3>
                                </label>
                                <div class="form-group row">
                                    <div class="col-lg-8 col-md-6 col-sm-12">
                                        <label>Commercial Name</label>
                                        <input type="name" class="form-control" id="cname" name="commercialName"
                                            #commercialName="ngModel" [(ngModel)]="model.commercialName" required>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <div class="col-lg-8">
                                        <label for="address">Address</label>
                                        <input type="text" class="form-control" id="address" name="address" #address="ngModel" [(ngModel)]="model.address"
                                            required>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <div class="col-lg-4">
                                        <label>Telephone 1</label>
                                        <div class="row">
                                            <!-- <div class="col-3">
                                          <input type="text" class="form-control" id="telephone" formControlName="telephone"name="telephone">
                                        </div> -->
                                            <div class="col-9">
                                                <input type="tel" id="telephone1" class="form-control" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
                                                [(ngModel)]="model.telephone1" name="telephone1" #telephone1="ngModel" required />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <label for="telephone2">Telephone 2</label>
                                        <div class="row">
                                            <!-- <div class="col-3">
                                                <input type="text" class="form-control" id="phone" formControlName="phone" name="phone">
                                          </div> -->
                                            <div class="col-9">
                                                <input type="tel" id="telephone2" class="form-control" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
                                                [(ngModel)]="model.telephone2" name="telephone2" #telephone2="ngModel" required />
                                            </div>
                                        </div>

                                    </div>
                                </div>
                                <div class="form-group row">
                                    <div class="col-lg-6">
                                        <label for="tradeLicense">Trade License</label>
                                        <input type="text" class="form-control" id="tradeLicense" [(ngModel)]="model.tradeLicense" name="tradeLicense" #tradeLicense="ngModel"
                                            required>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <div class="col-lg-6">
                                        <label for="areaServed">Area Served</label>
                                        <!-- <select class="form-control dropdown-select"  multiple="multiple" id="areaServed" [(ngModel)]="model.ZoneIds" name="ZoneIds" #ZoneIds="ngModel"
                                            required>
                                            <option></option>
                                            <option>1</option>
                                            <option>2</option>
                                            <option>3</option>
                                        </select> -->
                                        <select class="form-control dropdown-select" multiple searchable="Search here.."id="areaServed" [(ngModel)]="model.ZoneIds" name="ZoneIds" #ZoneIds="ngModel"required>
                                            <option value="" disabled selected></option>
                                            <option value="1">USA</option>
                                            <option value="2">Germany</option>
                                            <option value="3">France</option>
                                            <option value="4">Poland</option>
                                            <option value="5">Japan</option>
                                            <button class="btn-save btn btn-primary btn-sm">Save</button>
                                        </select>


                                    </div>
                                </div>
                                <div class="form-group row">
                                    <div class="col-lg-8">
                                        <label for="workshopID">Workshop ID<small> (Automatically Generated by system)</small></label>
                                        <input type="hidden" name="workshopID" value="ws-100">
                                        <input type="text" class="form-control workshop-id" id="workshopID" readonly
                                            value="Ws-100" placeholder="ws-100">
                                    </div>
                                </div>
                                <button type="submit" class="btn btn-default button-color pull-right">Add Workshop</button>
                            </form>

我添加的功能是:

add(model) {
         debugger
        let data =
        {
            ZoneIds:model.ZoneIds,
            address: model.address,
            commercialName: model.commercialName,
            telephone1: model.telephone1,
            telephone2: model.telephone2,
            tradeLicense: model.tradeLicense,
            //workshopID: model.workshopID,
        }
        //    for(var i=0; i< model.ZoneIds.length; i++)
        //    {
        //    data.ZoneIds.push(model.ZoneIds[i]);
        //    }
        return new Promise((resolve, reject) => {
            resolve(
                this.workshopsCollection.add(data).then(x=>{
               debugger
                    let res = x;

                })
                );
        });
    }

0 个答案:

没有答案
相关问题