Почему угловая форма поля сбрасывается, если я отправляю - PullRequest
Новая
       10

Почему угловая форма поля сбрасывается, если я отправляю

0 голосов
/ 30 декабря 2018

я провел много часов, но безуспешно.У меня есть два вопроса: первый вопрос: я использую конструктор угловых форм, но когда я нажимаю кнопку «Отправить», моя форма автоматически сбрасывается с помощью метки.Зачем?почему мои входные данные не хранятся.Второй вопрос: когда я обновляю страницу или меняю компонент, я хочу сохранить данные в поле формы, но это не работает.Я создаю сервис localalstorage с 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);
   }
}
...