Question

我花了很多时间，但没有成功。我有两个问题：第一个问题：我使用角度表单生成器，但是当我单击“提交”按钮时，我的表单会通过放置标签自动重置。为什么？为什么我的输入数据不保存。第二个问题：当我刷新页面或更改组件时，我想将数据保留在表单字段中，但这是行不通的。我用angular-webstorage-service创建一个本地存储服务

     <form (ngSubmit)="newDataForm()" [formGroup]="searchForm" class="form_container" 
        fxLayout="column"

        >
          <div class="form_item" fxLayout.lt-md="column" fxLayout.gt-sm="row" fxLayoutGap.gt-sm="5px" >
            <mat-form-field class="mat_form" id="form2"  appearance="outline" fxFlex.gt-sm="1 1 auto">
              <mat-label>Search by City or District</mat-label>
              <input matInput placeholder="Search by City or District" type="text" #sel formControlName="inputSearch" >
              <button mat-button *ngIf="sel.value" matSuffix mat-icon-button aria-label="Clear" (click)="searchClear()">
                <mat-icon>close</mat-icon>
              </button>
            </mat-form-field>
<div id="form3">
        <!-- [ngClass.gt-sm]="{'but-height-gt-sm':true}" -->

        <button type="submit" mat-raised-button color="primary" class="but_click but-height-gt-sm">
          <span>Search</span>

        </button>



      </div>

    </form>

和我的控制者

export class FormComponent implements OnInit {
  value = '';
  selectCtrl: FormControl;
  inputCtrl: FormControl;
  searchForm: FormGroup;
  data: DataSearchHomeInterface;
  properties: PropertiesInterface[] = [];

  constructor(
    fb: FormBuilder,
    private homeSearchService: HomeSearchService,
    public router: Router,
    private propertiesService: PropertiesService,
    private localStorageService: LocalStorageServiceService,
  ) {
    this.selectCtrl = fb.control('Rent'),
    this.inputCtrl = fb.control('');
    this.searchForm = fb.group({
      selectSearch: this.selectCtrl,
      inputSearch: this.inputCtrl,
    });
  }

  newDataForm() {
    this.homeSearchService.setDataFromHome((this.searchForm.value));
    console.log(this.searchForm.value);
    this.localStorageService.saveInLocal('input' , this.inputCtrl.value);
    this.localStorageService.saveInLocal('select' , this.selectCtrl .value);
    this.localStorageService.getFromLocal('select');
    this.inputCtrl.setValue(this.localStorageService.getFromLocal('input'));

    // this.router.navigate(['home/search']);
    this.router.navigate(['search']);
  }
  searchClear() {
    this.inputCtrl.setValue('');
  }
  ngOnInit() {
    // this.homeSearchService.getDataFromHome.subscribe(data => this.data = data);
    this.inputCtrl.setValue(this.localStorageService.getFromLocal('input'));

  }

为保留数据，我在刷新页面以保留数据但未成功时进行本地存储服务。我想将数据保留在称为“组件形式”的任何地方，因为我在另外两个组件中调用。

这是我的本地存储服务

export class LocalStorageServiceService {

  public data: any = [];
  constructor(@Inject(LOCAL_STORAGE) private storage: WebStorageService) { }
  saveInLocal(key, val): void {
    console.log('recieved= key:' + key + 'value:' + val);
    this.storage.set(key, val);
    this.data[key] = this.storage.get(key);
   }
   getFromLocal(key): void {
    console.log('recieved= key:' + key);
    this.data[key] = this.storage.get(key);
    console.log(this.data);
   }
}

如果我提交，为什么要重置角形场

0 个答案: